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

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

智能推荐

Unity 毛玻璃效果（UGUI）—高斯模糊_ugui 高斯模糊_清风半夜鸣蝉的博客-程序员秘密

因为Unity 提供了GrabPass，可以在Shader中很方便的拿到Panel下面的图像，即_GrabTexture。Shader "Custom/SimpleGrabPassBlur" { Properties { _Color ("Main Color", Color) = (1,1,1,1) _BumpAmt ("Distortion", R

html表格填充随页面大小自动缩放,如何设置HTML页面自适应宽度的table_木广蛋蛋的博客-程序员秘密

设置HTML页面自适应宽度的table的方法：1、定义html页面table代码：First NameLast NameGenderBirth DateAddressZip CodeNationalityContact NumberEmailUsernameCourseYearID NumberSubjects2、控制表格自适应的样式css代码：.content {width: 1100px;he...

算法提高排队打水问题 (思路）_我好想逃的博客-程序员秘密

问题描述　　有n个人排队到r个水龙头去打水，他们装满水桶的时间t1、t2………..tn为整数且各不相等，应如何安排他们的打水顺序才能使他们总共花费的时间最少？输入格式　　第一行n，r (n&lt;=500,r&lt;=75)　　第二行为n个人打水所用的时间Ti (Ti&lt;=100)；输出格式　　最少的花费时间样例输入3 21 2 3题意不难理解，关键是如...

索引生效oracle递归_oralce递归查询走索引吗_xszrt的博客-程序员秘密

explainselectsurname,first_nameforma,bwherea.id=b.id table：显示这一行的数据是关于哪张表的type：这是重要的列，显示连接使用了何种类型。从最好到最差的连接类型为const、eq_reg、ref、range、indexhe和ALLpossible_keys：显示可能应用在这张表中的索引。如果为空，没有可能的索引。可...

最简hadoop3.x完全分布式集群搭建_小书go的博客-程序员秘密

环境准备三台 Linux centos 7机器，本例中使用 vmware 创建三台虚拟机作为替代基于1，电脑需要安装好 vmware 软件，需要使用 secureCRT 登录Linux机器方便操作准备好 jdk 8 和 hadoop-3.1.2 安装包效果描述最后的集群为一个三台机器的 hadoop 集群，其中数据结点（DataNode）和计算结点（NodeManager）分布在...

图像增强序列——Adaptive Local Power-Law Transformation for Color Image Enhancement(自适应伽马变换)_Hit_HSW的博客-程序员秘密

1. 参考文献2. 模型实现% 论文： Adaptive Local Power-Law Transformation for Color Image Enhancement% 作者： Chun-Ming Tsai%% Author: HSW% Date: 2018-04-27clc;close all;clear;img = imread('timg2.jpg');fig...