element Checkbox多选框全选踩空

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

 全选

    {{item.name}}

// 数据定义
  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 就可以了

你可能感兴趣的:(前端项目经验)