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

华东

对于indeterminate和v-model绑定的hdIsIndeterminate和hdCheckAll的值

如果true true 或者 true false样式为-

如果false true样式为√

如果false false样式为不勾

效果如下:

elementUi中checkbox的属性indeterminate 状态和v-model的关系_第1张图片


    {{item.label}}

禁止编辑的时候你需要考虑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'])
        },

 

你可能感兴趣的:(JavaScript,vue,element-ui)