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

Posted 2023-03-19

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

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

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

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

然后开始实现：

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