elementUI checkbox选中回显操作注意事项

具体的详情介绍请看，elementUI checkbox。

checkbox的回显操作是基于 el-checkbox-group 标签v-module绑定的数组来实现回显，这个数组可以是一维数组，也可以是数组对象，具体使用那个都行，

不同点在于，el-checkbox 标签绑定的lable值的不同，如果 group 标签绑定的是数组对象，则 lable 绑定的是每一个对象；

如果group 绑定的是一维数组，则 lable 绑定的是具体值。

<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>

// 这是一维数组
checkedCities: ['上海', '北京'],
cities: ['上海', '北京', '广州', '深圳'],

也可以是数组对象，数据来源为数组对象，回显绑定的也可以是一维数组：

<el-checkbox-group v-model="checkedList" class="checked-list" @change="handleChange">
            <template v-for="(item,index) in memberList">
              <el-checkbox
                v-if="!item.contacts && ind!=1"
                :label="item.imAccount"
                :key="index"
                @change="(val)=>(checkChange(val,item))"
              >
                <userAndGroupChatAvatar
                  :text="item.textAvator"
                  :avatar="item.imgAvator"
                ></userAndGroupChatAvatar>
                <span>{{ item.nickName }}</span>
              </el-checkbox>
            </template>
          </el-checkbox-group>

lable 绑定为每一个数组对象中的具体值：imAccount。

 

回显主要应用事件为 全选的change事件，及 el-checkbox-group 标签的 change 事件，而 el-checkbox-group 标签的 change 事件总是返回当前更新后的值，

想要知道当前点击是取消，还是勾选，可以借用 el-checkbox-group 标签内嵌的 el-checkbox 标签的 change 事件，可以携带参数，

如上代码段中的  checkChange  事件：

checkChange(val,item){
      if(val){// 添加
        this.selectedPerson.push(item)
      }else{ // 删除
        this.selectedPerson = this.selectedPerson.filter(filter=>filter.imAccount != item.imAccount)
      }
    },