ElementUI Checkbox 多选框

我会带着你远行 2022-11-02 15:29 293阅读 0赞

# 一、概述 #

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

# 二、代码实现 #

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-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>

访问页面，效果如下：

![1c545e230c135d9270fd75c890c588e0.png][]

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

本文参考链接：

[https://element.eleme.io/\#/zh-CN/component/checkbox][https_element.eleme.io_zh-CN_component_checkbox]

[1c545e230c135d9270fd75c890c588e0.png]: /images/20221024/892dac381836496aa706b03a62e65865.png
[https_element.eleme.io_zh-CN_component_checkbox]: https://element.eleme.io/#/zh-CN/component/checkbox

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关 ElementUI Checkbox 多选框超过xx条显示更多

![在这里插入图片描述][20210506110629844.png] 点击更多 ![在这里插入图片描述][20210506110644475.png] <

た入场券/ 2023年01月18日 12:20/ 0 赞/ 132 阅读

相关 vue/elementUI CheckBox多选框赋值(设置`el-checkbox-group`以及`v-for`遍历`el-checkbox`)

前言最近有个功能，需要给项目添加一个多选赋值的功能，项目基于renren-security也就是半js半vue模式的前端。需求展示：给定一个字段，例如技术

亦凉/ 2023年01月03日 11:29/ 0 赞/ 239 阅读

相关 ElementUI Checkbox 多选框

一、概述适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。二、代码实现 test.vue <template>

我会带着你远行/ 2022年11月02日 15:29/ 0 赞/ 294 阅读

相关 ElementUI el-checkbox实现全选反选单选

一、概述先来看一下效果图 ![8dbcd72c55ff052910facb707005eab9.png][] 需求： 1. 每一种类型，可以全选，反选(一个都不选

痛定思痛。/ 2022年10月09日 02:35/ 0 赞/ 270 阅读

相关 CheckBox复选框

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

男娘i/ 2022年09月26日 03:15/ 0 赞/ 296 阅读

相关 php,checkbox多选框上传失败

用惯java和其他语言的时候，表单上传只需要checkbox的name相同的时候就可以上传了 <input type="checkbox" name="checkbo

╰半橙微兮°/ 2022年07月12日 05:18/ 0 赞/ 165 阅读

相关 Checkbox选框样式

drawable文件夹下定义selector\_checkbox.xml样式文件 <?xml version="1.0" encoding="utf-8"?>

电玩女神/ 2022年06月02日 02:40/ 0 赞/ 251 阅读

相关 uniApp 多选框checkbox ，判断是否选中

uniApp 多选框checkbox ，判断是否选中 ![4a9631149e30a9b4cbc600f5a5e3200e.jpg][]admin2019-04-25 【

╰半夏微凉°/ 2022年04月25日 09:42/ 0 赞/ 2832 阅读

相关 Form-checkbox多选框

![20190123150315117.png][] <!--单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。在el

╰+哭是因爲堅強的太久メ/ 2022年04月10日 11:19/ 0 赞/ 356 阅读

相关 element Checkbox多选框全选踩空

element checkbox 有个indeterminate 属性，用以表示 checkbox 的不确定状态，一般用于实现全选的效果 eg: <el-chec

朱雀/ 2022年03月09日 02:51/ 0 赞/ 298 阅读