动态控制表格列的显示和隐藏

(1) 通过v-if="colData[0].istrue"，通过勾选框的选中和不选中来控制对应列的istrue的true/false，从而控制每一列的显隐;

(2) slot="reference"插槽是element-ui的el-popover组件提供的插槽，触发 Popover 的元素

<template>
  <div class="index">
    <div>
      <el-popover placement="right" width="100" trigger="click">
        <el-checkbox-group v-model="colOptions">
          <el-col :span="12">
            <el-checkbox v-for="item in colSelect" :label="item" :key="item" ></el-checkbox>
          </el-col>
        </el-checkbox-group>
        <el-button slot="reference">设置</el-button>
      </el-popover>
    </div>
    <el-table :data="tableData" style="width: 100%" ref="tableDataRef">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column v-if="colData[0].istrue" prop="date" label="起始时间" width="180" align="center"></el-table-column>
      <el-table-column v-if="colData[1].istrue" prop="name" label="姓名" width="180" align="center"></el-table-column>
      <el-table-column v-if="colData[2].istrue" prop="address" label="地址" align="center"></el-table-column>
    </el-table>
  </div>
</template>

(3) data：colData是所有表头标题，colOptions是多选框默认全选，colSelect也是所有表头标题，只是是跟多选框组绑定的

colData: [
          {title: "起始时间",istrue: true},
          {title: "姓名",istrue: true},
          {title: "年龄",istrue: true},
],
colOptions: [ ], //默认全选
colSelect: [ ], //所有表头标题

(4)在watch里监听选中的选项,在created()钩子函数中判断不想展示的列

created() {
  var _this = this;
  for (let i = 0; i < _this.colData.length; i++) {
    _this.colSelect.push(_this.colData[i].title);
    if (_this.colData[i].title == '起始时间' || _this.colData[i].title == '姓名') {   //初始化不想展示的列可以放在这个条件里
      continue;
    }
    _this.colOptions.push(_this.colData[i].title);

  }
},
watch: {
  colOptions(valArr) {
    var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
    this.colData.filter(i => {
      if (arr.indexOf(i.title) != -1) {
        i.istrue = false;
        this.$nextTick(() => {
          this.$refs.tableDataRef.doLayout();
        });
      } else {
        i.istrue = true;
        this.$nextTick(() => {
          this.$refs.tableDataRef.doLayout();
        });
      }
    });
  }
},

原文链接：https://blog.csdn.net/weixin_43551840/article/details/92804040