element-ui表格组件table实现列的动态显示与隐藏

前言

在开发后台管理系统中，表格是经常用到的数据展示方式。然而，有时候表格展示的列过多，会出现一屏展示不下，需要手动滚动滚动条查看的情况。

其实，在系统实际使用的过程中，不同用户关注的列不同，并不是一定要展示所有的列。因此，可以开发一个能够配置表格需要展示的列的功能，这样只展示关注的列，不关注的列就无需在页面上展示，提高用户的使用体验。

需求

要求可以动态配置表格中需要展示的列，默认展示所有列。

思路

1. 将列数据定义在data中，然后动态绑定列数据到模板上
2. 提供一组用于设置列展示的复选框，默认选中所有列，即默认展示所有列
3. 选中或取消选中某个列时，更新模板中动态绑定的列数据，实现页面只显示需要展示的列

开发

状态

首先根据思路，可以确定几个状态：

• tableData 表格数据
• tableColumns 表格所有列数据，列数据的唯一来源
• bindTableColumns 绑定到模板上的列数据，即需要展示的列数据
• checkedTableColumns 复选框中选中的列数据

实现

然后开始实现：

1. 首先，写一个基础的表格。（参考element-ui基础表格）

2. 然后，优化模板。

   将表格的列数据tableColumns定义在data中，在模板中通过v-for指令遍历列数据。

3. 其次，优化列数据tableColumns，给每一个column添加show属性，用于表示列的显示与隐藏。默认为true，即默认展示所有列。

4. 再次，添加一个computed属性bindTableColumns，用于过滤出需要展示的列，并绑定到模板上。

   这样，后续对列的配置都只会操作tableColumns中列的显示与隐藏属性show，bindTableColumns会自动更新，页面也会自动重新渲染。

5. 然后，实现表格列配置模板，用于设置列的显示与隐藏。

   这里使用一组复选框，默认选中所有可供配置的表格列。

在线示例：

CodePen: element-ui table表格组件设置展示列的显示与隐藏