vue+element 实现通过控制checkbox让el-table-column显示或隐藏

本人初级前端渣渣，最开始拿到这个需求的时候走了很多弯路，在网上查阅了很多资料，看了很多别人写的demo，但是没有找到一种适合的，后来看到了csdn上一位博主做的类似的案例，地址https://blog.csdn.net/xingbipai5492/article/details/89705665

该实现方式是把循环column的值的lebel push进checkbox数据绑定的数组 然后el-table-column循环该数组得到列的label值 当checkbox选中或不选的时候便能控制绑定的数组里的值，同时列的值也受到影响，从而实现显示或隐藏。

代码 ：

 methods:{
            //表头处理
            headTable(){
                for(let i=0;i

但是我是使用该方法时列表里的数据却不能显示，原因是因为循环el-table-column时循环的数组里并没有prop值，但是如果在push进该数组数据的时候把prop也带上，checkbox就会受到影响，陷入一个尴尬的境地。

不过受到这位博主启发，选择了另外的方式：

//html代码

 
        
          {{item.label}}
        

        自定义显示列
      
 
    
      
      
      
    

//js代码

使用v-if 通过判断formThead是否有对应的label实现对应列的显示或隐藏
方法并不难 但是对于我这种初级渣渣要想到还是有些困难(lll￢ω￢)。

效果如下

1557456150(1).jpg