el-checkbox-group回显

el-checkbox-group 组件通过 v-model 控制选中的值，若需要回显数据，只需将要回显的值通过 v-model 绑定到 el-checkbox-group 上即可。例如：

<template>
  <div>
    <el-checkbox-group v-model="checkedCities">
      <el-checkbox label="北京"></el-checkbox>
      <el-checkbox label="上海"></el-checkbox>
      <el-checkbox label="广州"></el-checkbox>
      <el-checkbox label="深圳"></el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkedCities: ['北京', '上海'] // 默认选中北京和上海
      };
    }
  };
</script>

在上面的示例中，`checkedCities` 数组就是要回显的数据，通过 v-model 双向绑定到 el-checkbox-group 组件上，当 el-checkbox-group 内的复选框选中状态发生变化时，`checkedCities` 数组也会相应更新。

相关问题

el-checkbox-group回显对象数据失败

el-checkbox-group是Element UI中的一个多选框组件，回显对象数据失败可能有以下几个原因：

1. 数据格式不正确：回显数据应该是一个数组，而不是一个对象或其他数据类型。请确保传递给el-checkbox-group的v-model的数据格式正确。

2. 数据项的value值不唯一：如果回显的数据项的value值不唯一，可能会导致回显失败。请确保每个数据项的value值都是唯一的。

3. 数据项的value值类型不匹配：如果回显的数据项的value值类型与el-checkbox-group组件中定义的value值类型不匹配，可能会导致回显失败。请确保每个数据项的value值类型与el-checkbox-group组件中定义的value值类型一致。

4. 组件未正确绑定v-model：如果el-checkbox-group组件未正确绑定v-model，可能会导致回显失败。请确保el-checkbox-group组件已正确绑定v-model。

el-checkbox-group回显数据

el-checkbox-group组件在回显数据时，官方文档中只支持绑定基础数据类型(string / number / boolean)。如果需要绑定数组对象结构的数据并进行回显，需要自行解决这个问题。其中，可以参考以下方法解决：

1. 修改源码：可以根据项目所使用的element-ui版本，找到对应版本的element-ui源码，并按照指定版本clone下来。然后找到checkbox组件的源代码（packages/checkbox/src/），对源码进行修改。目前的源码中仅使用了数组的indexOf方法进行处理，不满足我们的需求。因此，可以尝试修改源码，使其支持绑定数组对象结构的数据进行回显。
#### 引用[.reference_title]
- *1* *3* [el-checkbox-group绑定数据为对象的回显问题](https://blog.csdn.net/wilsonfzh/article/details/123998398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vue ＜el-checkbox-group＞多选框回显](https://blog.csdn.net/u014508939/article/details/126507322)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]