element-ui中Checkbox多选框中indeterminate 全选状态深入理解

element-ui中Checkbox多选框中indeterminate 全选状态深入理解

• • 单选框后只有非一个字段

如果每一个单选框后只有一个字段，参考element-ui

单选框后只有非一个字段

提示一下：单选的每一项和列表中每一项是否相等，需要进一步进行处理

  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <div
        v-for="(item, index) in userList"
        :key="index"
        style="display:flex"
     >
         <el-checkbox
           :label="item.id"
           :checked="item.customerFlag ? true : false"
         >
            {{ '' }}
         </el-checkbox>
    <div>
    <div class="userTitle">
         <p class="littleTitle">{{ item.name }}</p>
         <span class="icon">
             <i class="el-icon-close"></i>
         </span>
    </div>
</el-checkbox-group>
//data数据
 userList: [],//[{},{},{}]请求列表的数据
 checkedCities: [], //选择id
 userListId: [], // 所有id
 checkAll: false,
 isIndeterminate: true, //不全选状态
//methods中
// 单个多选框
   handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.userList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.userList.length
   },
// 全选
    handleCheckAllChange(val) {
       this.checkedCities = val ? this.userListId : []
       this.isIndeterminate = false
    },

标签：Checkbox,isIndeterminate,单选框,indeterminate,checkedCount,element,userList,全选,选框
来源： https://blog.csdn.net/MISS_zhang_0110/article/details/119181611