效果如下![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/cb097d366b0f338969c6d4da6fa07dc3.png)
根据需求 这里用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循环,比较简单就不多讲了。
以上就是实现方式,是不是比较简单清晰简单