The relationship between the attribute indeterminate state of checkbox in elementUi and v-model

<el-checkbox :indeterminate="hdIsIndeterminate" v-model="hdCheckAll" @change="handleCheckAllChange($event, 'hd')">华东</el-checkbox>

The values ​​of hdIsIndeterminate and hdCheckAll bound to indeterminate and v-model

If true true or true false, the style is-

If false true style is √

If false false, the style is unchecked

The effect is as follows:

<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>

When prohibiting editing, you need to consider the values ​​of hdIsIndeterminate and 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'])
        },