element-ui复选框全选案例记录

DIY_v

于 2024-07-01 17:12:54 发布

阅读量122

点赞数 1

文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/DIY_v/article/details/140105811

版权

<!-- 
            indeterminate和v-model的值呈现的状态
            如果true true 或者 true false样式为-
            如果false true样式为√
            如果false false样式为不勾
             -->
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="SignAll"
            @change="signCheckAll"
            >全选</el-checkbox
          >
          <el-checkbox-group 
           v-model="checkedSignArr" 			         					                        
            @change="signGroup">
            <el-checkbox
              v-for="item in signArr"
              :label="item"
              :key="item"
            ></el-checkbox>
          </el-checkbox-group>
	-------------------------------------------------

	绑定值
		SignAll: false,
      	isIndeterminate: false,			//和SignAll判定是否全选
      	signArr: [],						//页面呈现的数组
      	checkedSignArr: [],				//选中的表面的数据
      	signGetArr: [], 			//后台接口获取含有id和name的数组

	-----------------------------------------------------

	方法-------------------------------------------------
	 // 全选按钮
    signCheckAll(val) {
      console.log("全选", val);
      this.checkedSignArr = val ? this.signArr : [];
      this.isIndeterminate = false;
    },

    // 单个按钮
    signGroup(value) {
      console.log("单个按钮", value);
      let checkedCount = value.length;
      this.SignAll = checkedCount === this.signArr.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.signArr.length;
    },
                                                               
	//缺个最后提交时，将后台获取的数据和选中的数据对比取出其id的操作。
	//复选回显的数组里面类型一定要跟那个循环的树结构类型对上，比如其是数值型的，那么回显数组里面的数据就要是数值型否则不回显示上对勾