正常的通过 el-checkbox-group el-checkbox 遍历数组操作很明显不满工作需求,大多数时候需要遍历的是数组对象。例如:
<template>
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>
全选
</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group
v-model="checkedCities"
@change="handleCheckedCitiesChange"
>
<el-checkbox
v-for="city in cities"
:label="city.id"
:key="city.id"
>
{{city.name}}
</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = [
{id: 1, name: "上海"},
{id: 2, name: "北京"},
{id: 3, name: "广州"},
{id: 4, name: "深圳"}
];
export default {
data() {
return {
checkAll: false,
checkedCities: ['上海', '北京'],
cities: cityOptions,
isIndeterminate: true
};
},
methods: {
handleCheckAllChange(val) {
let checked = cityOptions.map(item => {
return item.id;
});
this.checkedCities = val ? checked : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
};
</script>
关键在于 cityOptions.map() 处理数组对象
let checked = cityOptions.map(item => {
return item.id;
});