element Checkbox多选框全选踩空

朱雀 2022-03-09 02:51 296阅读 0赞

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 就可以了