公司项目用到element-ui,有个需求就是可以显示隐藏列,百度 google都查过了也没有好的解决方法,就自己写了一个很蠢的方法,毕竟需求需要先实现再优化嘛。
本来觉得自己写的太蠢了不想写出来让大家见笑,但是今天群友又问到这个问题我还是写出来吧。
大家如果有更好的方法可以留言告诉我一下。tks~
先来看下我实现的效果。

在右侧加上了一个icon,点击出现一个下拉,这个也是element的组件,不过我改写了一下。
这个icon在renderHeader方法中return的innerHTML根据自己需求自己更改。demo中我改成了操作2字。
h("span", {domProps: {innerHTML: `操作`}})
下面看下代码实现。
主要实现步骤:
1.在data中声明一个show变量。
2.在table中,给需要隐藏的列加上 v-if='show[0].label',下标是递增的。
3.在created方法里写一个for循环,注意for循环判断条件要和你table上面show有多少个下标+1哦,就是show的length
4.复制在methods中的renderHeader方法,在测试一下就OK了。