此案例基于 基于element-ui的分页表格组件，增加了动态列的功能。

实现思路

  实现动态列本质上是控制列的显隐状态，如果是使用jQuery的话，无非是操作dom。目前使用的是vue，其屏蔽了dom的操作，允许我们通过变量间接的操作dom。
  之前实现过一个版本，形式类似这位仁兄写的博文（此链接），而且我是封装成了组件，父子级组件的数据、属性设置甚是繁杂。想着怎么优化，后面发现此文 Vue 动态修改dom样式，觉得是时候重新实现下这个动态列的功能了。抛弃了用变量控制显隐状态，直接操作dom。
（之前的实现找个时间也整理一下，有对比才有伤害）

20200728 更新：
  打脸了，本以为“直接操作dom来实现动态列”会比较简洁高效，实际使用效果却差强人意。实际使用中会出现表格中间空白，以及列宽不会自动伸缩等等问题。那么还是老老实实使用 v-if 属性控制列的显隐来实现动态列功能。

组件功能

1. 继承 分页表格组件 的所有功能
2. 动态列功能开关
3. 支持动态列设置
4. 支持初始隐藏列的设置
5. 支持不可隐藏列的设置

效果图

相关代码

相关的代码托管在码云，必要的注释都注明在代码中。传送门走你：码云地址
对应的文件目录为 src/views/PageTable/frontendPagingDynCol-v2/，PageTable.vue 为组件代码，
frontendPagingDynColvue为使用案例。

系列文章

• 分页表格组件
• 动态列分页表格组件（动态控制表格列的显隐）
• 后端分页表格组件
• 终极分页表格组件（前/后端分页、动态列）

reference：
vue：遇到的坑之-----动态控制表格列的显隐（element-ui）
Vue 动态修改dom样式

---

end