<div class="itemTime">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选</el-checkbox
>
<el-checkbox-group
v-model="checkedCities"
@change="handleCheckedCitiesChange"
>
<el-checkbox
v-for="city in labels"
:label="city.department_chinese"
:key="city.department_name"
:value="city.department_name"
>{{ city.department_chinese }}</el-checkbox
>
</el-checkbox-group>
</div>
export default {
name: "drawer",
data() {
return {
labels:[{
"department_name": "Engineering",
"department_code": "ENG",
"department_chinese": "工程部"
},
{
"department_name": "MM",
"department_code": "MM",
"department_chinese": "物料管理部"
},
{
"department_name": "Qua.&Envir.",
"department_code": "QUE",
"department_chinese": "品质与环保部"
},
{
"department_name": "Production",
"department_code": "PRO",
"department_chinese": "生产部"
}
],
checkAll: false,
checkedCities: [],//需要绑定的数据
allElection: [], // 全选
selectionArr: [], // 选中要传给后台的数据 对象
isIndeterminate: true,
}
},
mounted() {
this.allElectionFun();//获取需要默认显示的数据
this.DefaultFullSelection();//初始化 默认全部选中
},
methods: {
allElectionFun() { // 获取需要默认显示的数据
this.allElection = [];
for (var i = 0; i < this.labels.length; i++) {
this.allElection.push(this.labels[i].department_chinese)
}
},
DefaultFullSelection() {
// 初始化 默认全部选中
this.checkedCities = this.allElection;
let checkedCount = this.checkedCities.length;
this.checkAll = checkedCount === this.labels.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.labels.length;
this.selectionFun(this.checkedCities);
},
selectionFun(selectionArr) { // 获取选中的对象
this.selectionArr = [];
for (var i = 0; i < this.labels.length; i++) {
for (var j = 0; j < selectionArr.length; j++) {
if (selectionArr[j] === this.labels[i].department_chinese) {
this.selectionArr.push(this.labels[i])
}
}
}
},
handleCheckAllChange(val) { // 全选
this.allElectionFun();
this.checkedCities = val ? this.allElection : [];
this.isIndeterminate = false;
// console.log(this.checkedCities);
this.selectionFun(this.checkedCities);
console.log(this.selectionArr)
},
handleCheckedCitiesChange(value) { // 选中
let checkedCount = value.length;
this.checkAll = checkedCount === this.labels.length;
this.isIndeterminate = checkedCount > 0 && checkedCount <
this.labels.length;
this.selectionFun(value);
console.log(this.selectionArr)
},
}
}