Vue Element Table如何实现动态列筛选功能？

本文共计768个文字，预计阅读时间需要4分钟。

需求：在使用列表展示数据时，出现大量信息导致表格格式特别长，显示不够明了，用户使用起来可能觉得抓不住重点。设想实现：用户可手动选择表格的列进行隐藏。

需求：在用列表展示数据时，出现了很多项信息需要展示导致表格横向特别长，展示就不够明晰，用户使用起来可能会觉得抓不住自己的重点。

设想实现：用户手动选择表格的列隐藏还是展示，并且记录用户选择的状态，在下次进入该时仍保留选择的状态。

效果图如下：

原：

不需要的关掉默认的勾选：

实现代码：
HTML部分就是用一个多选框组件展示列选项
用v-if="colData[i].istrue"控制显示隐藏，把列选项传到checkbox里再绑定勾选事件。