ElementUI Checkbox 多选框

发布时间：2021-03-10 14:22:59编辑：admin阅读（3615）

    一、概述

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

     

    二、代码实现

    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


关键字：

上一篇： vue拦截器qs

下一篇： vue中使用localStorage存储信息