<template>
<span>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group v-model="checkGroup" @change="handleCheckedChange">
<el-checkbox v-for="item in copyLists" :label="item.key" :key="item.key">{{item.name}}</el-checkbox>
</el-checkbox-group>
</span>
</template>
<script>
export default {
data() {
return {
checkAll: false, // 全选
checkGroup: [], // 已经选中的数据
isIndeterminate: false, // 全选的标记
checkedKeyLists: [], // key的list数据
copyLists: [
{
name: '测试1',
key: '1'
},{
name: '测试2',
key: '2'
},{
name: '测试3',
key: '3'
},{
name: '测试4',
key: '4'
},{
name: '测试5',
key: '5'
}
], // 选择的列表数据
};
},
mounted() {
this.init();
},
methods: {
// 初始化 checkedKeyLists
init() {
this.copyLists.forEach(el => {
this.checkedKeyLists.push(el.key);
});
},
// 全选操作
handleCheckAllChange(val) {
this.checkGroup = val ? this.checkedKeyLists : [];
this.isIndeterminate = false;
},
// 选择操作
handleCheckedChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.copyLists.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.copyLists.length;
}
}
};
</script>
