el-table动态列筛选

在用列表展示数据时，出现了很多项信息需要展示导致表格横向特别长，展示就不够明晰，这就需要对列进行动态筛选。

HTML：

<template>
  <div style="padding:20px">
    <el-popover placement="right" title="列筛选" trigger="click" width="420" style="float: left;">
      <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 slot="reference" type="primary" size="small" plain>
        <i class="el-icon-arrow-down el-icon-menu" />列表项展示筛选</el-button>
    </el-popover>
    <el-table
      :data="tableData1"
      @sort-change="sort"
      highlight-current-row
      :row-class-name="holidayRow"
      ref="multipleTable"
      row-key="id"
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        v-if="colData[0].istrue"
        align="center"
        prop="id"
        label="工号"
        min-width="100"
        fixed
      ></el-table-column>
      <el-table-column
        v-if="colData[1].istrue"
        align="center"
        prop="name"
        label="姓名"
        min-width="100"
        fixed
      ></el-table-column>
      <el-table-column
        v-if="colData[2].istrue"
        align="center"
        prop="address"
        label="地址"
        min-width="160"
      ></el-table-column>
      <el-table-column
        v-if="colData[3].istrue"
        align="center"
        prop="gender"
        label="性别"
        min-width="100"
      ></el-table-column>
      <el-table-column
        v-if="colData[4].istrue"
        align="center"
        prop="department"
        label="系统"
        min-width="100"
      ></el-table-column>
    </el-table>
  </div>
</template>

JS：

<script>
export default {
  components: {},
  name: "table-filter",
  data() {
    return {
      //列表动态隐藏
      colData: [
        { title: "工号", istrue: true },
        { title: "姓名", istrue: true },
        { title: "年龄", istrue: true },
        { title: "性别", istrue: true },
        { title: "部门名称", istrue: true },
      ],
      checkBoxGroup: [],
      checkedColumns: [],
      tableData1: [
        {
          id: 1,
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          gender: "男",
          department: "职能",
        },
        {
          id: 2,
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          gender: "男",
          department: "营销",
        },
        {
          id: 3,
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          gender: "男",
          department: "研发",
          hasChildren: true,
        },
        {
          id: 4,
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          gender: "男",
          department: "工业化",
        },
      ],
    };
  },
  created() {
    // 列筛选
    this.colData.forEach((item, index) => {
      this.checkBoxGroup.push(item.title);
      this.checkedColumns.push(item.title);
    });
    this.checkedColumns = this.checkedColumns;
    let UnData = localStorage.getItem(this.colTable);
    UnData = JSON.parse(UnData);
    if (UnData != null) {
      this.checkedColumns = this.checkedColumns.filter((item) => {
        return !UnData.includes(item);
      });
    }
  },
  methods: {
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 3.1,
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
            gender: "男",
            department: "营销",
          },
          {
            id: 3.2,
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
            gender: "男",
            department: "营销",
          },
        ]);
      }, 100);
    },
  },
  // 监控列隐藏
  watch: {
    checkedColumns(val, value) {
      let arr = this.checkBoxGroup.filter((i) => !val.includes(i)); // 未选中
      localStorage.setItem(this.colTable, JSON.stringify(arr));
      this.colData.filter((i) => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
        } else {
          i.istrue = true;
        }
      });
    },
  },
};
</script>

结果：

标签：el,name,istrue,title,王小虎,checkedColumns,table,筛选,true
来源： https://blog.csdn.net/m0_60540878/article/details/120650437