elementUi中checkbox的属性indeterminate 状态和v-model的关系

<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'])
        },