控制el-table的列显示隐藏

控制el-table的列显示隐藏，一般的话可以通过循环来实现，但是假如业务及页面比较复杂的话，list数组循环并不好用。

在我们的页面中el-table-column是固定的，因为现在是对现有的进行维护和迭代更新。

对需要控制列显示隐藏的页面进行控制。

1.封装的组件代码如下：

1.1 el-tooltip用于文字提示：不明白el-tooltip点击此处了解

1.2 el-row内3个按钮分别为form表单显示隐藏，页面刷新，控制列弹层。

1.3 el-transfer为打开的弹层（穿梭框）：不明白el-transfer点击此处了解

 2.js代码：

3.页面样式如下两图所示：

左边为页面的三个按钮，下面为弹层样式（一眼知道蒸馍操作了哦）

4.在data中·定义变量

用于控制form表单显示隐藏的showSearch，以及table的列名的数组columns：

 data() {
    return {
      showSearch:true,
      columns: [
        { key: 0, label: `多选列`, visible: true },
        { key: 1, label: `序号列`, visible: true },
        { key: 2, label: `库存编号`, visible: true },
        { key: 3, label: `库区名称`, visible: true },
        { key: 4, label: `状态`, visible: true },
        { key: 5, label: `平台仓库`, visible: true },
        { key: 6, label: `负责人`, visible: true },
        { key: 7, label: `拣货方式`, visible: true },
        { key: 8, label: `库区类型`, visible: true },
        { key: 9, label: `操作`, visible: true },
      ],

5.在页面中引入使用：

（搞成全局的就不用一个个引入了）

其中showSearch和colums上面讲了，还有一个getList就是页面获取数据的函数

6.对搜索和列进行显示隐藏：

对需要显示隐藏的列加上如下就行，并且和定义的columns设定的key需要一致哦。

if="columns[num].visible"

    表单：
 

btn按钮：
搜索

重置

需要控制显示隐藏的el-table-column列：
     

控制el-talbe列的显示隐藏完成。