Vue动态控制el-table表格列隐藏与显示

发表于2021-11-10更新于2021-11-10字数统计428阅读时长3分

背景

对于一张el-table，有时候为了看到更多有用信息，会想要隐藏掉某些不重要的列，好让更多有用信息集中在一页中。这个时候我们需要动态控制部分列的显示与隐藏。

如何实现

定义一个控制按钮

1
2
3
4
5
6
<el-popover width="60" trigger="click" placement="right-end">
  <el-checkbox-group v-model="columnSelect">
    <el-checkbox v-for="item in columnHeaders" :label="item.title" :key="item.title"></el-checkbox>
  </el-checkbox-group>
  <el-button slot="reference" icon="el-icon-more" circle style="margin-left: 100px;"></el-button>
</el-popover>

其中，v-model绑定了默认选择显示的列，v-for对应了所有可选的列，定义如下：

1
2
3
4
5
columnHeaders: [
  {index: 0, title: "备注", isShow: true},
],
//已选择的项
columnSelect: ["备注"]

表格中选择需要控制的列

1
<el-table-column v-if="columnHeaders[0].isShow" label="备注" align="center" prop="remark" width="150"/>

同时，给表格一个ref：ref="dataTable"

效果如下：

效果

数据绑定与监听

定义watch：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
watch: {
  /**
   * @title 监听列显示隐藏
   */
  columnSelect(newArrayVal) {
    // 计算为被选中的列标题数组
    const nonSelect = this.columnHeaders
      .filter(item => newArrayVal.indexOf(item.title) === -1)
      .map(item => item.title);
    // 根据计算结果进行表格重绘
    this.columnHeaders.filter(item => {
      let isNonSelected = nonSelect.indexOf(item.title) !== -1
      if (isNonSelected) {
        // 隐藏未选中的列
        item.isShow = false
        this.$nextTick(() => {
          this.$refs.dataTable.doLayout()
        })
      } else {
        // 显示已选中的列
        item.isShow = true
        this.$nextTick(() => {
          this.$refs.dataTable.doLayout()
        })
      }
    })
  }
},

监听到已选择和未选择的列，调用doLayout()方法对表格进行重绘。

效果

效果