element el-table列 显示隐藏的问题

注：只是记录一次自己遇到的一个自己给自己埋坑的 经历
领导给了一个需求，需要对表格的列 根据不同的条件做判断显示隐藏  

当时自己以为这个需求很简单， 这不是就是一个v-show 的事情吗 然后 我就使用v-show 但是最后发现并没有什么效果 当时是傻眼了 后来去找度娘 才知道 

 

 

 v-show的本质 就是对dom元素 设置display:none  但是td设置的display:table-cell  并且权限层级高于display:none 所以v-show 不会有效果

 

v-show不行 那就用v-if 吧 然后当时有很多列都用了v-if，试了一下，效果实现了 

但是自己后来调试的时候发现 频繁操作表格  表格的数据列就混乱了 。。。。。

当时以为这个bug 没救了 但是没办法 领导催着要 只能继续想办法 后来看了相关资料，才知道

 

给el-table,设置一个key属性，这个问题就完美解决。这个是因为el-table做了一些优化，可以复用列(这个在android开发中的ListView 复用item的原理是一样的)，不加key,就成了bug. 然后当时我就对列加了:key="Math.random()"

 

然后当时以为就好了 。然后提交 万事大吉 结果测试人员发现   要是一个页面上 有两个这样的表格  在操作表格的按钮时， 有一个表格就会闪动一下，界面操作效果十分不好 。没办法 ，继续改

 

继续想办法。 用v-if 就是为了实现条件判断，然后加随机数就是为了解决多个v-if 的显隐导致的表格列错乱  那问题点就是我表格用了多个v-if   我把判断条件精简一点 ，会不会好点 

 

后来自己试了一下 精简了条件 然后用一个div盒子包裹相同的条件 然后调试发现 表格列还是会出现 错乱的问题 当时以为这个方法行不通了 ，后来一想 我换成template 试下 （当时已经不抱什么希望了）

 

但是最后发现 换成template 包裹是可以的 表格数据列不会错乱，多个类似的表格渲染也不会出现表格闪动的问题

（菜鸡填坑， 写的不好，各位大佬见谅 ）