elementUi中checkbox的属性indeterminate 状态和v-model的关系_-Dayer-的博客-程序员秘密

技术标签： element-ui JavaScript vue es6 vue.js javascript

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

本文链接：https://blog.csdn.net/WDCCSDN/article/details/104994141

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

python pct_change_Python Pandas，使用pct_change函数重新采样数据_weixin_39578899的博客-程序员秘密

在Pandas 0.18或更高版本中，可以使用^{}：def percent_change(x):if len(x):return (x[-1]-x[0])/x[0]ser.resample('60T', base=30).apply(percent_change)它产生了^{pr2}$如果没有base=30，ser.resample('60T')会将序列重新采样为60分钟的间隔(分钟和秒等于0)...

AT+CNMI之自动接收短信_mchp的博客-程序员秘密

AT+CNMI的使用短消息类(class)的概念：根据指定储存的位置，短消息分为class 0 – 3四个类。也可以不指定类(no class)，由ME按默认设置进行处理，存储到内存或者SIM卡中。在TPDU的TP-DCS字节中，当bit7-bit4为00x1, 01x1, 1111时，bit1-bit0指出消息所属类： 00 – class 0：只显示，不储存 01 – class 1：储存在

GLES2.0中文API-glDrawElements_gles文档_flycatdeng的博客-程序员秘密

名称glDrawElements - 从数组数据中渲染图元C规范void glDrawElements（GLenum mode， GLsizei count， GLenum type, const...

操作系统之进程的同步机制_2、请给出进程同步原则准确描述_腾腾儿娃的博客-程序员秘密

文章目录进程的同步机制一.基本概念1.进程同步机制的概念2.为何要引入进程同步机制3.临界资源4.临界区二.进程同步与互斥关系1.同步2.互斥三.进程同步机制的四个基本原则1.空闲让进2.忙则等待3.有限等待4.让权等待四.软件和硬件同步方法1.软件方法2.硬件方法五.信号量机制概述1.整型信号量2.记录型信号量3.AND型信号量4.信号量集六.Linux中的信号量1.定义信号量2.信号量的初始化...

Python之路【第1天】_long88866_long88866的博客-程序员秘密

python应用Python可以应用于众多领域，如：数据分析、组件集成、网络服务、图像处理、数值计算和科学计算等众多领域。目前业内几乎所有大中型互联网企业都在使用Python，如：Youtube、Dropbox、BT、Quora（中国知乎）、豆瓣、知乎、Google、Yahoo!、Facebook、NASA、百度、腾讯、汽车之家、美团等。互联网公司广泛使用Python来做的事一般有：自动化运维、自动

2019高教社杯全国大学生数学建模竞赛论文展示_暖神warm的博客-程序员秘密

随着2019高教社杯全国大学生数学建模竞赛逐渐落下帷幕，全国大学生数学建模竞赛组织委员会**授权发布**了## 2019高教社杯全国大学生数学建模竞赛论文展示了解咨询更多高教社杯全国大学生数学建模竞赛可关注官方授权公众号：中国大学生在线（wwwunivscn）。...