标签：Checkbox isIndeterminate 单选框 indeterminate checkedCount element userList 全选 选框

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。