ElementUI Checkbox 多选框

一、概述

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

二、代码实现

test.vue

<template>
  <div style="width: 70%;margin-left: 30px;margin-top: 30px;">
    <el-checkbox-group v-model="checkList">
      <el-checkbox v-for="item in itemList" :key="item.id" :label="item.name" :value="item.id"></el-checkbox>
<!--      <el-checkbox label="复选框 A"></el-checkbox>-->
<!--      <el-checkbox label="复选框 B"></el-checkbox>-->
<!--      <el-checkbox label="复选框 C"></el-checkbox>-->
    </el-checkbox-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 所有列表
        itemList:[
          {
            id: 1,
            name: "复选框 A"
          },
          {
            id: 2,
            name: "复选框 B"
          },
          {
            id: 3,
            name: "复选框 C"
          },
        ],
        // 选中列表
        checkList: ['复选框 A','复选框 C']
      }
    },
  }
</script>

<style>
</style>

View Code

访问页面，效果如下：

注意：checkList里面的值，必须和页面显示的一致，才能选中。

本文参考链接：

https://element.eleme.io/#/zh-CN/component/checkbox