element-ui中el-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
},