ElementUI Checkbox 多选框

发布时间:2021-03-10 14:22:59编辑:admin阅读(190)

    一、概述

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

     

    二、代码实现

    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>


     

    访问页面,效果如下:

    1.png


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

     

     

    本文参考链接:

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


关键字