vue2+element-ui 记录6

element-ui table 表格的列显示/隐藏、列拖动、列的宽度拖动数据保存 1（仅适用于新手）

在网上找了很多关于element-ui表格列的显示/隐藏/拖动列都没有满足我的需求，收集了各位道友的资料后，在这里记录一下这个功能，希望能帮到道友们！
1.首先得有一个表格页面，根据element-ui框架的“Table 表格 - 固定表头”示例代码，添加至UserList组件中，如下图所示：


页面效果图如下：

2.接下来再为表格顶部添加一个工具栏，如下图：


注意：
I.需要在src => utils => element-ui.js文件中添加Button组件。
II.暂时不要问为什么，按照以上的做，能达到如下图的效果图就成。

III.请暂时不用理会上图中标记的小bug（即刷新页面后未选中当前访问路由对应的菜单项），这个我们以后再来解决；
3.现在我们要实现一个功能：点击右上角的设置图标，显示我们当前表格的所有列（之后再实现拖动这些列改变当前表格对应列的顺序，设置这些列显示/隐藏表格对应列，哎，为了记录这个大功能，才有前面5篇记录，有点麻烦，更有点困，不过总算走到这里了，如果需要这个功能的道友，请仔细看哦）。
4.在src => components文件夹下新建组件TableSet（之前就说了，要利用vue的组件特点。为了以后任何页面表格可以通用，这里也使用组件，方便使用），如下图所示：

5.根据elemen-ui框架的“Popover 弹出框”之“嵌套信息”示例，我们就使用这个组件来实现，点击展示列表的所有列效果，将主要代码复制过来，稍微改动一下，如下图所示（记得在elemenui.js文件引入组件Popover）：

样式代码如下图：

6.在UserList组件中引入组件TableSet，如下图所示：

点击表格设置图标，浏览器的效果图如下：

7.（不得不说上面的有点啰嗦，但我只针对新手，所以抱歉，确实有点啰嗦）接下来，我们就在TableSet组件中修改，先写一个静态效果，如下图所示（照着写就是了）：

样式代码如下图：

看到上面是不是很烦，为啥全是图片，其实我还是想让新手自己手动敲出来，印象更深刻（澄清一下，这次真的不是懒，其实截图比贴代码更麻烦）！
注意：因为组件Popover弹框的时候，生成的dom在body下面，是body的子集，所以上图中，tb-col类样式没有放到table-set类下面（这个可以用浏览器查看一下就能看出原因）。
效果图如下（样式可以随意调整成自己喜欢的样子，此处不多做修改。宽度调整在Popover标签的width属性）：

这里我们暂时自己定义列的数组数据，如下（后期优化的时候，可以通过循环自动设置show属性，所以这个初始数据又可以简化点点了）：

fields: [
 {label: '全选', disabled: true, show: true},
 {label: '日期', field: 'date', width: 130, show: true},
 {label: '姓名', field: 'name', width: 130, show: true},
 {label: '地址', field: 'address', width: 130, show: true},
], // 显示的列数组

8.这里我们还需要监听一下列的数据变化（即列复选框的选中与取消选中），需要用到vue的侦听器watch，如下图（完成之后可以点击列的复选框，在浏览器的控制台看看数据是否都变化了）：

注意点
1.有点啰嗦，希望谅解一下；
2.图片太多了，下一章继续；

活到老，学到老，学无止尽！欢迎大家相互讨论，相互学习！不喜勿喷！