标签：el name istrue title 王小虎 checkedColumns table 筛选 true

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。