element-ui checkbox基础多选（绑定后台json对象值）

首先申明看你需求的数据格式是怎样的
如果是json数组的如：

const cityOptions = ['上海', '北京', '广州', '深圳']

那么可以直接看element-ui的官方链接的写法
https://element.eleme.cn/#/zh-CN/component/checkbox
但我们实际项目开发中大部分都是json数组而element-ui的官方文档中没有给出详细的操作流程
直接上码
html部分：

    <div>
      <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
      <el-checkbox-group v-model="data" @change="handledataChange">
        <el-checkbox v-for="(value,key) in datas" :key="key" :label="value.key">{{ value.name }}</el-checkbox>
      </el-checkbox-group>
    </div>

data部分：

      datas: [{ key: 1, name: '小明' }, { key: 2, name: '小王' }, 
      { key: 3, name: '小张' }, { key: 4, name: '小刘' }, 
      { key: 5, name: '小李' }, { key: 6, name: '小邓' }], // json对象数据
      checkAll: false, // 全选状态
      data: [],
      isIndeterminate: true //indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果

method中js部分：

   //全选
    handleCheckAllChange(val) {
      // 绑定json对象时
      this.checkAll = !!this.checkAll //判断全选
      const checked = this.datas.map(function(item) { return item.key }) //通过使用map绑定要去得的值（键）我这里取key
      this.data = this.checkAll ? checked : [] // 是否被选中
      this.isIndeterminate = false
      console.log(this.data)
      // 绑定纯json数组
      // this.data = val ? this.datas : []
      // this.isIndeterminate = false
    },
    // 非全选
    handledataChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.datas.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.datas.length // 根据选中的数量定义全选的状态
      console.log(value)
    },

handleCheckAllChange和handledataChange方法中的输出是一个json数组 数据是被选中的值 我这边因为设置**:label=“value.key”** 所以输出的也是key的值

非全选时：

我的数据格式：

源码链接:
https://download.csdn.net/download/qq_41193701/12049212