实现效果
实现思路
- 就是结合el-select和el-checkbox. 主要难点就是点击多选框的时候 会触发el-select的change事件。 这里需要阻止一下事件冒泡
- el-options这里如何和table的列关联上，以及表格列刷新的时候。一定要给每个el-table-column加上key。
主要代码
<template>
<div style="width:100%;margin:120px 500px">
<el-select
v-model="selectedArray"
multiple
placeholder="请选择"
@change="handleSelectChange"
collapse-tags
@visible-change="visibleSelect"
>
<div style="padding: 10px 20px;">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选</el-checkbox
>
</div>
<el-option
v-for="item in options"
:key="item.key"
:label="item.label"
:value="item.key"
>
<span>
<el-checkbox
@click.stop.native
@change="handleCheckbox(item)"
v-model="item.checked"
:label="item.label"
>{{ item.label }}</el-checkbox
>
</span>
</el-option>
</el-select>
<el-table
ref="table"
:data="tableData"
style="width: 100%;margin-top: 180px;"
>
<el-table-column
key="1"
prop="date"
label="日期"
width="180"
v-if="showColumn.date"
/>
<el-table-column
key="2"
prop="name"
label="name"
width="180"
v-if="showColumn.name"
/>
<el-table-column
key="3"
prop="address"
label="地址"
v-if="showColumn.address"
/>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ key: "date", label: "日期", checked: true },
{ key: "address", label: "地址", checked: true },
{ key: "name", label: "姓名", checked: true }
],
checkAll: false,
isIndeterminate: false,
currentChoose: [],
checked: true,
selectedArray: [],
showColumn: {},
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
],
array: ["date", "name", "address"]
};
},
mounted() {
let res = localStorage.getItem("selectedArray");
res
? (this.selectedArray = res.split(","))
: (this.selectedArray = this.array);
},
watch: {
selectedArray: {
handler: function(val) {
let result = {};
val.forEach(item => (result[item] = true));
this.showColumn = result;
this.$nextTick(() => {
this.$refs.table.doLayout();
});
}
}
},
methods: {
handleSelectChange(val) {
this.selectedArray = val;
this.options.map(j => {
val.includes(j.key) ? (j.checked = true) : (j.checked = false);
});
let checkedCount = this.selectedArray.length;
this.checkAll = checkedCount === this.options.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.options.length;
},
handleCheckAllChange(val) {
this.selectedArray = [];
if (val) {
this.options.map(i => {
i.checked = true;
this.selectedArray.push(i.key);
});
} else {
this.options.map(i => {
i.checked = false;
});
this.selectedArray = [];
}
this.isIndeterminate = false;
console.log("this.selectedArray", this.selectedArray);
},
handleCheckbox(item) {
item.checked
? this.selectedArray.push(item.key)
: (this.selectedArray = this.selectedArray.filter(
i => i !== item.key
));
let checkedCount = this.selectedArray.length;
this.checkAll = checkedCount === this.options.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.options.length;
},
visibleSelect(val) {
let res = localStorage.getItem("selectedArray");
if (val) {
if (!res) {
localStorage.setItem("selectedArray", this.selectedArray);
this.checkAll = false;
} else {
if (this.selectedArray.length === this.options.length) {
this.checkAll = true;
} else {
this.isIndeterminate = true;
}
this.selectedArray = res.split(",");
}
} else {
localStorage.setItem("selectedArray", this.selectedArray);
}
this.options.map(j => {
this.selectedArray.includes(j.key)
? (j.checked = true)
: (j.checked = false);
});
}
}
};
</script>
总结
网上的教程，都是写一点就不写，就很烦。又不能实现，想偷个懒还要积分。想分享就直接分享，写一点吊人胃口。 所以特意写个demo出来。
注意
这里默认了一进来就展示所有的列，并且进行了本地存储，如果不需要的话 可以自己删除关于localStorage相关代码
