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

 前端HTML

//列表
    
      
      
      

//筛选按钮

    
    {{item.value}}
    
    

JS

//筛选按钮的数据列表，与table表头的数据一致
tableList: [
      {
        label: 'order',
        value: '序号'
      },{
        label: 'name',
        value: '名字'
      },{
        label: 'age',
        value: '年龄'
      }]

checkList: [],//筛选列选中的数据列表
uncheckList: {},//控制筛选列显示隐藏

//页面加载自动运行函数
mounted: function () {
            this.filter()
        },

//控制隐藏显示的函数
filter(val) {
                //初始化数据
                if (val == undefined) {
                    for (index in vm.tableList) {
                        let table = vm.tableList[index];
                        vm.checkList.push(table.label);
                        vm.uncheckList[table.label] = true;
                    }
                }
                //数据准备
                for (item in vm.uncheckList) {
                    vm.uncheckList[item] = false;
                }
                //数据处理
                for (index in vm.checkList) {
                    let name = vm.checkList[index];
                    if (name in vm.uncheckList) {
                        vm.uncheckList[name] = true;
                    }
                }
                this.$forceUpdate();
            }

通过v-if=""控制的显示隐藏
所以v-if=""里面的数据值要和tableList里面的数据一一对应

最后结果：

取消上报单位的框就改列就会消失