Vue动态设置控制表格列表展现列

最近遇到一个需求，表格列表默认不展示某一列，当我设置后可以展示该列，也可以展示和隐藏别的列，起到可以对整个表格列展示隐藏控制的效果，如下示例，默认不展示“单位名称”这一列，在我点击设置齿轮后可以看到，有“单位名称”这一列，但未打钩：
在这里插入图片描述
当我勾中“单位名称”，去掉“地址”的勾中后，列表可以看到“单位名称”这一列，看不到“地址”这一列。达到了我们控制表格列展示隐藏的效果。这里用到的UI组件库是iview和elementUI。实现思路是：列表展示列我们用到了tableHead,然后我们定义了一个数组showListS用于控制展示列集合，
齿轮里我们用到了el-tree组件，其数据data我们绑定的是一个数组tableHeadArray，默认不展示“单位名称”，我们需要tableHead赋值给tableHeadArray，然后对tableHead过滤掉placeName，当用户勾选或取消勾选某项时，showListS会发生改变，我们watch监听其改变，然后tableHeadArray里找到showListS对应要展示的列，然后赋值给tableHead，达到列表回显的效果。