element ui多选框组checkbox-group的使用

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

杜蜜月

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

阅读量6.1k

点赞数 4

分类专栏：项目问题小记文章标签： elementui vue javascript

本文链接：https://blog.youkuaiyun.com/honeymoon_/article/details/119538713

版权

项目问题小记专栏收录该内容

48 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用Element UI的el-checkbox-group组件来管理一组多选框。通过v-model绑定Array类型的变量checkList，可以轻松实现多选框的选择状态管理。每个el-checkbox的label属性用于标识选项值，同时作为选中后的数据存储。默认选中和未选中状态可以通过checked属性设置。在变更事件change中，可以处理选中项的逻辑。示例代码展示了如何遍历groupList创建多选框，并根据item.id和item.checked进行初始化。

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

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

使用vue实现

template中

<template>
  <div class="checkbox-group">
    <el-checkbox-group v-model="checkList">
      <el-checkbox 
        :key="item.id"
        v-for="item in groupList"
        :label="item.id"
        :checked="item.checked"
        @change="changeSelect"   //当绑定值变化时触发的事件
      >{{item.name}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

注：label之所以使用item.id而不是item.name是因为v-model绑定的checkList（数组：包含已选中的选项）与label是同一个数据。（意思就是，label绑定的是啥，选中后，checkList里面就有啥），为了以后方便处理，选用id。

data中

data() {
      return {
        //多选框选中的数据的id集合
        checkList: [],
        groupList: [
          {
            id: 'time',
            name: '时间',
            checked: true,   //默认选中
          },
          {
            id: 'number,
            name: '数量',
            checked: false,    //默认不选
          },
        ]
      }
    },