<el-checkbox :indeterminate="hdIsIndeterminate" v-model="hdCheckAll" @change="handleCheckAllChange($event, 'hd')">华东</el-checkbox>
对于indeterminate和v-model绑定的hdIsIndeterminate和hdCheckAll的值
如果true true 或者 true false样式为-
如果false true样式为√
如果false false样式为不勾
效果如下:
<el-checkbox-group v-model="hdCheckProvince" @change="handleCheckedCitiesChange($event, 'hd')">
<el-checkbox v-for="item in hdList" :label="item.pyCode" :key="item.pyCode" :disabled="disabledAreaConfig.indexOf(item.pyCode)>-1">{
{item.label}}</el-checkbox>
</el-checkbox-group>
禁止编辑的时候你需要考虑hdIsIndeterminate和hdCheckAll的值
handleCheckAllChange(val, key) {
console.log(val, key, 'key')
let arr = []
let all = []
this[key+'List'].map((v) => {
all.push(v.pyCode)
if (~this.disabledAreaConfig.indexOf(v.pyCode)) {
arr.push(v.pyCode)
}
})
this[key+'CheckProvince'] = val ? all : arr
let checkedCount = this[key+'CheckProvince'].length
this[key+'CheckAll'] = checkedCount === this[key+'List'].length
this[key+'IsIndeterminate'] = val ? false: arr.length > 0 && arr.length < all.length
console.log(this[key+'IsIndeterminate'], 'IsIndeterminate', this[key+'CheckAll'])
},
handleCheckedCitiesChange(val, key) {
console.log(val)
let checkedCount = val.length
this[key+'CheckAll'] = checkedCount === this[key+'List'].length
this[key+'IsIndeterminate'] = checkedCount > 0 && checkedCount < this[key+'List'].length
console.log(this[key+'IsIndeterminate'], 'IsIndeterminate', this[key+'CheckAll'])
},