element中table组件控制列的展示与隐藏问题【简单实现方式】

效果如下

根据需求 这里用element的checkBox组件来控制列的展示与隐藏，如下图

• 其中v-model = ‘’checkedColumns”表示预先选中列表项，为展示项，为方便观察，我这里直接写在data()中。
• 用v-for="checkBox in checkBoxGroup"循环输出CheckBox项，因为这里的checkBoxGroup数据较长，我放到了vuex内。（这两部分数据均为固定数据，都放到data()中亦可） 见下图：
  
  
  

关键在这里： 如上图可以看到我在设计数据结构时加上了index和min-width项，这是实现控制展示与隐藏的关键所在，以布尔值index控制展示状态，min-width控制列宽。引入的columns则是动态的计算table的column展示列。

实现代码：

handleCheckboxChange (checkBox) {
      checkBox.index = !checkBox.index
      if (checkBox.index === true) {
        this.columns.push({ label: checkBox.label, prop: checkBox.prop, 'mix-width': checkBox['min-width'] })
        this.$store.commit('reports/SET_COLUMN', this.columns)
      } else {
        this.columns.forEach((column, index, arr) => {
          if (column.prop === checkBox.prop) {
            arr.splice(index, 1)
          }
        }) 
        this.$store.commit('reports/SET_COLUMN', this.columns)
      }
    }
  }

1. 当选中某一列时置位当前checkBoxGroup中选中列的index属性为相反布尔值，则原本表示显示的列就被隐藏（或丢弃更合适），原本隐藏的就展示。

2. 接下来就可以判断index的状态了，为true就需要显示当前列，这里直接对columns进行入栈操作

this.columns.push({ label: checkBox.label, prop: checkBox.prop, ‘mix-width’: checkBox[‘min-width’] })

为false我这里用的迭代删除，简单方便理解

this.columns.forEach((column, index, arr) => {
if (column.prop === checkBox.prop) {
arr.splice(index, 1)
}
})

然后更新到vuex中就行了（不会vuex的同学建议先看一下）

this.$store.commit(‘reports/SET_COLUMN’, this.columns)

3. 最后就是把列展示出来了，table的columns因为要动态计算，这里存放在vuex中，结构如下。这里依旧用for循环，比较简单就不多讲了。


以上就是实现方式，是不是比较简单清晰简单

总结一下

之前浏览过全网的一些实现方式，感觉没有比较合适的实现方法，特别是当列表项过多，达到几十上百项的时候，要么是代码逻辑复杂冗余，要么就是嵌套循环复杂度过高。这里通过添加一个布尔值的状态位index来控制展示，整体上比较简单，逻辑也比较清晰，关键是节省时间！！！最大的难点大概是vuex的使用，其实也很简单。

当然这个实现方式还有一些缺陷。比如还没有加上排序，隐藏后展出的列就不再原来的位置上了。后续有需求再继续更新。