element Checkbox多选框全选踩空

最新推荐文章于 2024-08-09 08:00:00 发布

_dalianmiao

最新推荐文章于 2024-08-09 08:00:00 发布

阅读量3.1k

点赞数 1

分类专栏：前端项目经验

本文链接：https://blog.csdn.net/hani_wen/article/details/88415219

版权

前端项目经验专栏收录该内容

33 篇文章 5 订阅

订阅专栏

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