vue-element循环多选框(带有全选)功能
Sonder
2021-04-20
1377字
3分钟
浏览 (2.9k)
废物不多说,直接上代码
Vue代码:
const xiandingyingxiongOptions = '韩信 娜可露露 橘右京 不知火舞';
data() {
return {
CurData: '',
arr: {
'限定英雄': xiandingyingxiongOptions.split(" "),
},
ruleForm: {
'限定英雄': []
},
checkAll: {
'限定英雄': false,
},
isIndeterminate: {
'限定英雄': true,
},
}
},
methods: {
handleCheckAllChange(val, label) {
this.ruleForm[label] = this.checkAll[label] ? this.arr[label] : [];
this.isIndeterminate[label] = false;
},
handleCheckedCitiesChange(value, label) {
let checkedCount = value.length;
this.checkAll[label] = checkedCount === this.arr[label].length;
this.isIndeterminate[label] = checkedCount > 0 && checkedCount < this.arr[label].length;
},
}
html代码:
<template v-for="(value,label) in arr">
<el-form-item :label="label">
<el-checkbox :indeterminate="isIndeterminate[label]" v-model="checkAll[label]"
@change="handleCheckAllChange(checkAll[label],label)">全选
</el-checkbox>
<el-checkbox-group v-model="ruleForm[label]">
<el-checkbox v-for="i in value" :label="i" :key="i"
@change="handleCheckedCitiesChange(ruleForm[label],label)">{{ i }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</template>