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>

 

訪問頁面，效果如下：

注意：checkList里面的值，必須和頁面顯示的一致，才能選中。

 

 

本文參考鏈接：

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