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

 前端HTML

//列表
<el-table>    
      <el-table-column prop="order" label="序号" header-align="center" 
       v-if="uncheckList.order" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" header-align="center" 
       v-if="uncheckList.name" align="center"></el-table-column>
      <el-table-column prop="age" label="年龄" header-align="center" 
       v-if="uncheckList.age" align="center"></el-table-column>
</el-table>
//筛选按钮
<el-popover
      placement="right"
      title="列筛选"
      trigger="click">
    <el-checkbox-group v-model="checkList" @change="filter">
    <el-checkbox v-for="(item,index) in tableList" :label="item.label">{{item.value}}</el-checkbox>
    </el-checkbox-group>
    <el-button size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu"></i></el-button>
</el-popover>

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=""控制<el-table-column>的显示隐藏
所以v-if=""里面的数据值要和tableList里面的数据一一对应

最后结果：

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