当前位置: 首页 > 工具软件 > CheckboxGroup > 使用案例 >

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

萧奇
2023-12-01

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,    //默认不选
          },
        ]
      }
    },

官网链接:https://element.eleme.cn/#/zh-CN/component/checkbox

 类似资料: