解决 el-checkbox-group 值为对象的时候复选框回显问题

最新推荐文章于 2025-04-11 11:15:33 发布

独步炎凉的大彬

最新推荐文章于 2025-04-11 11:15:33 发布

阅读量1.5w

点赞数 4

分类专栏： vue 文章标签： elementui vue.js

本文链接：https://blog.youkuaiyun.com/qcg14774125/article/details/124377658

版权

vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了在Vue.js中处理复选框回显的问题，特别是当复选框对应的值为对象数组时。通过示例代码展示了如何实现单元素和对象数组的复选框回显，并提供了相应的数据结构示例。解决方案包括确保model中的数据结构与循环的集合匹配，以及在每个选择对象外添加其id值以达到回显效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上一个例子

<template>
  <el-checkbox-group 
    v-model="checkedCities"
    :min="1"
    :max="2">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        checkedCities: ['上海', '北京'],
        cities: cityOptions
      };
    }
  };
</script>

1.这种选择数组只是单元素而不是object的时候，直接让绑定的model和循环的集合对应就可以达到复选框回显

2.复选框数组里面是对象时，复选框回显方法

<el-checkbox-group v-model="formData.field101" size="medium" @change="handleChecked()">
          <el-checkbox
              v-for="(item, index) in field101Options"
              :key="index"
              :label="item.id"
              >{{ item.value}}</el-checkbox
           >
</el-checkbox-group>

field101Options的数据结构是

field101Options: [
        {
          value: "选项一",
          id: 1,
        },
        {
          value: "选项二",
          id: 2,
        },
      ],

解决方法很简单，让你的model里面的数据结构等于

formData: {
        field101: [
          {
            value: "选项一",
            id: 1,
          },
          1,
          {
            value: "选项二",
            id: 2,
          },
          1
        ],
      },

就可以达到回显效果，一定要在每个选择对象外面加上该条对象里面的id值