el-table动态显示隐藏列

一.
筛选弹出框：

<el-col :span="1.5">
<el-popover placement="bottom" title="筛选列" trigger="click" width="40">
        <el-checkbox-group v-model="checkedColumns" size="mini">
          <el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"></el-checkbox>
        </el-checkbox-group>
        <el-button icon="el-icon-plus" size="mini" slot="reference">筛选列</el-button>
      </el-popover>
      </el-col>

二.
给每一列添加 v-if

    <el-table-column v-if="colData[0].istrue" prop="serverCode" label="编号" width="80px"></el-table-column>

注意：要给el-table添加:key="reload"属性，这是为了主动重新渲染列表，避免组件自动使用缓存而不刷新。

三.

data() {
    return {
        // colData中列出表格中的每一列，默认都展示
        colData: [
            { title: "编号", istrue: true },
            { title: "内网IP", istrue: true },
            { title: "设备状态", istrue: true },
            { title: "持续时间", istrue: true },
            { title: "更新时间", istrue: true },
            { title: "服务状态", istrue: true },
            { title: "工作状态", istrue: true },
            { title: "是否请允许关机", istrue: true },
            { title: "服务器类型", istrue: true },
          ],
         ,
      // 多选框的列表，列出表格的每一列
      checkBoxGroup: ["编号", "内网IP", "设备状态", "持续时间", "更新时间", "服务状态", "工作状态", "是否请允许关机", "服务器类型"],
      // 当前选中的多选框，代表当前展示的列
      checkedColumns: ["编号", "内网IP", "设备状态", "持续时间", "更新时间", "服务状态", "工作状态", "是否请允许关机", "服务器类型"]
    }
}

四.
监听筛选列事件

watch: {
    checkedColumns(val) {
      let arr = this.checkBoxGroup.filter(i => !val.includes(i));
      this.colData.filter(i => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
        } else {
          i.istrue = true;
        }
      });
      //解决表格闪烁问题(不一定出现)
      this.reload = Math.random()
    }
  }