vue的element-ui如何给多选框绑定key-value形式的数据

Question

element的下拉框和单选框组件都分别绑定key和value，但多选框组件官方给的例子只能绑定value数据

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    data () {
      return {
        checkList: ['选中且禁用','复选框 A']
      };
    }
  };
</script>

比如我的数据结构是

[{"key":"1","value":"test1"},{"key":"2","value":"test2"}]

就不能用了，有什么办法解决

Answer 1

<el-checkbox-group v-model="checkList">
    <el-checkbox :label="item.key" v-for="(item, i) in data" :key="i">{{item.value}}</el-checkbox>
</el-checkbox-group>

把要展示的文字直接写在标签里就行了，label用来绑定值

官方文档上多选框组那里是这么写的

checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。