element checkbox 有个indeterminate 属性,用以表示 checkbox 的不确定状态,一般用于实现全选的效果
eg:
全选
{{item.name}}
// 数据定义
data () {
return {,
selectedAll: false,
selectedAllList: [],
isIndeterminated: false,
selectedData: [], 会被赋值,非空数组,是所有的选择框的集合
}
},
handleSelectedAll (val) {
if (val) {
this.selectedData.forEach(item => {
this.selectedAllList.push(item.id)
})
} else {
this.selectedAll = false
}
this.isIndeterminated = false
},
handleSelectedAllChange (val) {
this.selectedAll = val.length === this.selectedData.length
this.isIndeterminated = val.length > 0 && val.length < this.selectedData.length
},
问题在哪里,一开始全选,清空操作handleSelectedAll 和多选框的状态对不上,我查看了文档也找不出什么不妥,后续终于知道问题所在了,el-checkbox-group 绑定的值selectedAllList 要和下面循环的label值完全一致才可以,通常来讲我们label唯一的会采用后台传的id值,我们只要该值在点击handleSelectedAll 的时候,绑定到selectedAllList 就可以了