效果展示 :
源码:粘贴可用
<template>
<div>
<el-popover placement="top-start" title="自定义表头" width="200" trigger="click">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选</el-checkbox>
<el-checkbox-group v-model="checkedList" @change="handleCheckedChange">
<el-checkbox v-for="item in tableLabel" :label="item.param" :key="item.param">{
{item.label}}</el-checkbox>
</el-checkbox-group>
<el-button slot="reference" icon="el-icon-setting">自定义</el-button>
</el-popover>
</div>
</template>
<script>
export default {
props: {
tableLabel: {
type: Array,
default: () => {
return [];
}
},
hiddenString: {
type: String,
default: ""
}
},
data() {
return {
checkAll: false,
checkedList: [],
isIndeterminate: true
};
},
created() {
this.dataAnalysis();
},
methods: {
dataAnalysis() {
//选中数据
let hiddenCheckedList = this.$getStorage(this.hiddenString);
this.checkedList = [];
if (hiddenCheckedList) {
let array = hiddenCheckedList;
for (let index = 0; index < array.length; index++) {
this.checkedList.push(array[index]);
}
} else {
let array = this.tableLabel;
for (let index = 0; index < array.length; index++) {
if (array[index].show) {
this.checkedList.push(array[index].param);
}
}
}
//样式判断
this.checkAll = this.checkedList.length === this.tableLabel.length;
this.isIndeterminate =
this.checkedList.length > 0 &&
this.checkedList.length < this.tableLabel.length;
},
handleCheckAllChange(value) {
if (value) {
this.checkedList = [];
this.tableLabel.forEach(element => {
this.checkedList.push(element.param);
});
} else {
this.checkedList = [];
}
this.isIndeterminate = false;
this.$setStorage(this.hiddenString, this.checkedList);
this.$emit("handleCheckedChangelist&#