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

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