情景:数据加载完成之后点击全选按钮无响应,后点击任一除全选框的复选框出现全选现象
<div>
<p>售卖区域</p>
<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"
:key="city"
border>
{
{city}}
</el-checkbox>
</el-checkbox-group>
</div>
复选框的数据需要数组形式的,如果调用接口获取的数据不是数组形式,则可能出现以上问题
handleCheckAllChange(val) {
let list =[];
for(let i in this.cities){
list.push(this.cities[i])
}
this.checkedCities = val ? list : [];
this.isIndeterminate = false;//控制样式
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
},