element Checkbox多选框全选踩空

element checkbox 有个indeterminate 属性,用以表示 checkbox 的不确定状态,一般用于实现全选的效果
eg:

<el-checkbox :indeterminate="isIndeterminated" v-model="selectedAll"  @change='handleSelectedAll'> <span style='margin-left: 15px;'>全选</span></el-checkbox>
<el-checkbox-group v-model="selectedAllList" @change="handleSelectedAllChange">
   <el-checkbox v-for="item in selectedData" :key='item.id' :label="item.id"> {{item.name}}</el-checkbox>
</el-checkbox-group>
// 数据定义
  data () {
    return {,
      selectedAll: false,
      selectedAllList: [],
      isIndeterminated: false,
      selectedData: [],   会被赋值,非空数组,是所有的选择框的集合
    }
  },
    handleSelectedAll (val) {
      if (val) {
        this.selectedData.forEach(item => {
          this.selectedAllList.push(item.id)
        })
      } else {
        this.selectedAll = false
      }
      this.isIndeterminated = false
    },
    handleSelectedAllChange (val) {
      this.selectedAll = val.length === this.selectedData.length
      this.isIndeterminated = val.length > 0 && val.length < this.selectedData.length
    },

问题在哪里,一开始全选,清空操作handleSelectedAll 和多选框的状态对不上,我查看了文档也找不出什么不妥,后续终于知道问题所在了,el-checkbox-group 绑定的值selectedAllList 要和下面循环的label值完全一致才可以,通常来讲我们label唯一的会采用后台传的id值,我们只要该值在点击handleSelectedAll 的时候,绑定到selectedAllList 就可以了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值