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

野性酷女 2022-01-15 23:47 993阅读 0赞

前端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>

//筛选按钮的数据列表，与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里面的数据一一对应

最后结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70]: /images/20220115/70aab6f169f743a787797aaf392ef2d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70 1]: /images/20220115/aca391968d6e45c7bdb7fca42548f4f4.png