element 循环动态Checkbox 多选框

最新推荐文章于 2024-05-04 19:04:40 发布
最新推荐文章于 2024-05-04 19:04:40 发布
阅读量4.5k 收藏 21
点赞数 5
分类专栏： element vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoHelloWord/article/details/117567802
版权
vue 同时被 2 个专栏收录
26 篇文章 1 订阅
订阅专栏
element
14 篇文章 1 订阅
订阅专栏

直接放图，这里做的是权限控制
在这里插入图片描述

<table width="100%">
	<tbody>
			<tr v-for="(permissionTop,topIndex) in tableData" :key="topIndex">
				<th style="line-height:48px;border:1px solid #1E9FFF;padding:0 10px;width: 150px;">
					
					<el-checkbox :indeterminate="permissionTop.indeterminate" 
					:key="topIndex" v-model="permissionTop.mychecked"
					 :label="permissionTop.id" 
					 @change="onChangeTop(topIndex, permissionTop.id, $event)">
					 {{permissionTop.name}}</el-checkbox>
				</th>
				<td style="border:1px solid #1E9FFF;padding:0 10px">
					
					<el-checkbox-group  v-model="checkedCities">
						<el-checkbox
						v-model="permissionSon.mychecked"
						
						v-for="permissionSon in permissionTop.dataList" :key="permissionSon.id"
						 @change="onChangeSon(topIndex, permissionSon.id, permissionTop.id, $event)"
						 :label="permissionSon.id" >{{permissionSon.name}}</el-checkbox>
					 </el-checkbox-group>
				</td>
			</tr>
		</tbody>
	</table>

onChangeTop(index, topId, e) { //父级change事件
				let that = this
				that.tableData[index].mychecked = e //父级勾选后，子级全部勾选或者取消
				if (e == false) that.tableData[index].indeterminate = false //去掉不确定状态
				
				var childrenArray = that.tableData[index].dataList //这里注意是选取一级下的二级数据
				var	len = childrenArray.length;
				if (that.tableData[index].mychecked == true){
					// 点击全选往v-model添加选中的id
					for (var i = 0;  i < childrenArray.length; i++)
						that.checkedCities.push(childrenArray[i].id)
				}else{
					//取消全选删除重复的id
					that.checkedCities = that.checkedCities.filter(item => !childrenArray.some(ele=>ele.id===item));
					
				}
			},
			onChangeSon(topIndex, sonId, topId, e) { //子级change事件
				let that = this
				var childrenArray = that.tableData[topIndex].dataList//这里注意是选取一级下的二级数据
				var tickCount = 0,
					unTickCount = 0,
					len = childrenArray.length
				console.log(childrenArray)
				for (var i = 0; i < len; i++) {
					if (sonId == childrenArray[i].id) childrenArray[i].mychecked = e
					if (childrenArray[i].mychecked == true) tickCount++
					if (childrenArray[i].mychecked == false) unTickCount++
					
				}
				if (tickCount == len) { //子级全勾选
					that.tableData[topIndex].mychecked = true
					that.tableData[topIndex].indeterminate = false
				} else if (unTickCount == len) { //子级全不勾选
					that.tableData[topIndex].mychecked = false
					that.tableData[topIndex].indeterminate = false
				} else {
					that.tableData[topIndex].mychecked = true
					that.tableData[topIndex].indeterminate = true //添加不确定状态
				}
			},

数据格式

{
    "data":[
        {
            "id":1,
            "name":"角色管理",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":1,
                    "typeID":1,
                    "name":"角色查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":2,
                    "typeID":1,
                    "name":"新增角色",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":3,
                    "typeID":1,
                    "name":"删除角色",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":4,
                    "typeID":1,
                    "name":"权限设置",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":12,
                    "typeID":1,
                    "name":"导出",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":2,
            "name":"员工管理",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":5,
                    "typeID":2,
                    "name":"员工查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":6,
                    "typeID":2,
                    "name":"添加员工",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":8,
                    "typeID":2,
                    "name":"删除员工",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":9,
                    "typeID":2,
                    "name":"登录限制",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":10,
                    "typeID":2,
                    "name":"修改密码",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":11,
                    "typeID":2,
                    "name":"导出数据",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":78,
                    "typeID":2,
                    "name":"导入员工",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":3,
            "name":"员工穿着",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":13,
                    "typeID":3,
                    "name":"穿着查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":14,
                    "typeID":3,
                    "name":"添加穿着",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":16,
                    "typeID":3,
                    "name":"删除穿着",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":18,
                    "typeID":3,
                    "name":"批量导入",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":19,
                    "typeID":3,
                    "name":"批量导出",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":4,
            "name":"员工终端",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":20,
                    "typeID":4,
                    "name":"终端查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":21,
                    "typeID":4,
                    "name":"添加终端",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":22,
                    "typeID":4,
                    "name":"删除终端",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":23,
                    "typeID":4,
                    "name":"终端启用",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":24,
                    "typeID":4,
                    "name":"批量导入",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":25,
                    "typeID":4,
                    "name":"批量导出",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":5,
            "name":"员工奖惩",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":26,
                    "typeID":5,
                    "name":"奖惩查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":6,
            "name":"排班管理",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":27,
                    "typeID":6,
                    "name":"排班查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":28,
                    "typeID":6,
                    "name":"添加排班",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":29,
                    "typeID":6,
                    "name":"排班导出",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":79,
                    "typeID":6,
                    "name":"删除排班",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":7,
            "name":"考勤管理",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":30,
                    "typeID":7,
                    "name":"打卡记录",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":31,
                    "typeID":7,
                    "name":"统计分析",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":32,
                    "typeID":7,
                    "name":"请假记录",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":8,
            "name":"车辆类别",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":33,
                    "typeID":8,
                    "name":"类别查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":34,
                    "typeID":8,
                    "name":"添加类别",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":35,
                    "typeID":8,
                    "name":"删除类别",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":36,
                    "typeID":8,
                    "name":"类别启用",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":9,
            "name":"车辆信息",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":37,
                    "typeID":9,
                    "name":"车辆查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":38,
                    "typeID":9,
                    "name":"添加车辆",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":39,
                    "typeID":9,
                    "name":"删除车辆",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":41,
                    "typeID":9,
                    "name":"车辆导入",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":42,
                    "typeID":9,
                    "name":"车辆导出",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":10,
            "name":"车辆异常统计",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":43,
                    "typeID":10,
                    "name":"异常查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":44,
                    "typeID":10,
                    "name":"删除",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":45,
                    "typeID":10,
                    "name":"处理",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":11,
            "name":"车辆费用",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":46,
                    "typeID":11,
                    "name":"费用分析",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":47,
                    "typeID":11,
                    "name":"费用统计",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":48,
                    "typeID":11,
                    "name":"分析导出",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":49,
                    "typeID":11,
                    "name":"统计导出",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":12,
            "name":"用油管理",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":50,
                    "typeID":12,
                    "name":"用油查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":51,
                    "typeID":12,
                    "name":"添加用油",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":52,
                    "typeID":12,
                    "name":"导入用油",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":53,
                    "typeID":12,
                    "name":"导出用油",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":77,
                    "typeID":12,
                    "name":"删除用油",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":13,
            "name":"维保管理",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":54,
                    "typeID":13,
                    "name":"维保查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":55,
                    "typeID":13,
                    "name":"添加维保",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":56,
                    "typeID":13,
                    "name":"删除维保",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":57,
                    "typeID":13,
                    "name":"导出维保",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":58,
                    "typeID":13,
                    "name":"维保提醒",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":59,
                    "typeID":13,
                    "name":"统计分析",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":14,
            "name":"保险管理",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":60,
                    "typeID":14,
                    "name":"保险查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":61,
                    "typeID":14,
                    "name":"添加保险",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":62,
                    "typeID":14,
                    "name":"删除保险",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":63,
                    "typeID":14,
                    "name":"导出保险",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":64,
                    "typeID":14,
                    "name":"保险提醒",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":15,
            "name":"年检管理",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":65,
                    "typeID":15,
                    "name":"年检查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":66,
                    "typeID":15,
                    "name":"添加年检",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":67,
                    "typeID":15,
                    "name":"删除年检",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":68,
                    "typeID":15,
                    "name":"导入年检",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":70,
                    "typeID":15,
                    "name":"导出年检",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":71,
                    "typeID":15,
                    "name":"年检提醒",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        },
        {
            "id":16,
            "name":"违规管理",
            "remark":"",
            "mychecked":false,
            "indeterminate":false,
            "dataList":[
                {
                    "id":72,
                    "typeID":16,
                    "name":"违规查询",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":73,
                    "typeID":16,
                    "name":"添加违规",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":74,
                    "typeID":16,
                    "name":"删除违规",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":75,
                    "typeID":16,
                    "name":"导入违规",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                },
                {
                    "id":76,
                    "typeID":16,
                    "name":"导出违规",
                    "remark":"",
                    "mychecked":false,
                    "indeterminate":false
                }
            ]
        }
    ],
    "state":10001,
    "msg":"ok",
    "code":0,
    "count":0,
    "extraParams":null
}
真的不想哇
关注
  • 5
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 循环勾选框_Vue学习笔记-遍历el-checkbox
weixin_34551660的博客
01-13 3887
Vue学习笔记-遍历el-checkoutv-model="checkAll":label="list.eventtypeid">全选:label="operate.actionid":key="operate.actionid"@change="handleCheckedCitiesChange">{{operate.actionname}}看上面的例子，都是把el-checkbox...
循环多组checkbox-group
weixin_43153138的博客
03-28 4046
使用场景 因项目需求，采用动态数据展示每组多选，所以循环多组checkbox-group进行实现！ 1.页面代码 <el-form-item v-for="(item, topIndex) in cities" :key="topIndex" class="checkBox-item"> <el-checkbox class="textCheck" :disabled="dialo
vue+elementui 动态获取数据 遍历循环 生成el-checkbox-group
热门推荐
chenacxz的博客
11-29 4万+
实际效果，参照了http://www.cnblogs.com/wjunwei/p/9531322.html 数据库存表方式和单选一样 <el-card class="boxs-card"> <div slot="header" class="clearfix"> <span>多选题<...
VUE+TS使用elementUI的el-checkbox双重v-for循环做勾选
chabaimgg的博客
04-24 632
【代码】VUE+TS使用elementUI的el-checkbox双重v-for循环做勾选。
VUE实现elementUI多选框动态渲染
最新发布
qq_62175972的博客
05-04 323
1. 通过:check属性控制多选框动态勾选，但由于VUE特性多选框并不会实时渲染。2. 实现VUE组件实时渲染，可以设置:key属性进行强制渲染。② 由①所勾选的多选框，取消勾选时会删除数据库对应记录。① 若数据库中存在记录，则多选框会动态自动勾选。
element 实现多个循环出来的复选框，以及回显
wqnmlgbsz的博客
09-11 5419
1.效果图如上 下面是demo1，点击aaaa 所有rule里面的链接 放到一个数组里面 <style scoped> </style> <template> <el-form label-width="200px"> <el-button @click="aa">点击我打印结果</el-button> <el-form-item v-for="item in ci...
vue循环生成的el-checkbox的控件双向绑定失效问题(选中、取消失效)
风中追风
09-23 6417
做到这里后，以为实现了功能，看效果发现问题: 点击时候，el-checkbox没有勾上，也没变化，但是checked的数值确实是变化了，但视图没有变化，那就说明：这样给值的checked没有和组件双向绑定上！！！
vue中使用Checkbox 多选框循环遍历
weixin_43549979的博客
08-20 1万+
首先效果展示 步骤如下： 1、html <el-form> <el-form-item v-for="(item, index) in dataList" :key="index"> <el-checkbox @change="(val) => handleCheckAllListChange(val, item)" :indeterminate="itemIndet
循环动态判断checkbox是否被选中
04-05
循环动态判断checkbox是否被选中foreach(Control c in Panel1.Controls)
vue中循环多组checkbox-group
m0_57442975的博客
10-12 4799
1.因为官网给出的checkbox group绑定的数据格式是数组，而在项目中接收的数据通常是对象数组，我这里label绑定的是数组中对象的id属性，点击获取的是id的数组，在最后提交数据时需要做处理。2.一开始也尝试了label绑定整个对象，这样获取到的直接便是最终需要的对象数组，展示和添加是可以实现的，但是回显遇到了问题，在网上看是回显的数据格式要与选中的数组中对象的格式一致，尝试了没有效果，后面再研究一下。
for循环el-checkbox实现类似于el-collapse的折叠效果
m0_49529959的博客
12-03 2417
1.需要实现的功能 1.1可以实现多选操作，点击label文字/多选框实现多选操作，点击（点击可展开预览/收起）实现多选条件
element-ui之Checkbox 多选框
demo_020的博客
01-16 3901
需求：下载功能要展示所有的下载字段，用户根据需要使用多选框选中后提交，并完成下载。 这里 我使用了element-ui的Checkbox 多选框 1.引用Checkbox 多选框 <el-checkbox-group sortable="cistom"> <el-checkbox v-for="tag in downloadDisplay" //遍历展示下载字段 :label="tag.id" :key="tag.id"
组件-Element---Checkbox（多选框）
GU_AO_SHI_TAI_DU的博客
07-02 1698
组件-Element—Checkbox 组件—多选框 基础用法 <template> <!-- `checked` 为 true 或 false --> <el-checkbox v-model="checked">备选项</el-checkbox> </template> <script> export d...
jQuery实现获取多选框的值示例
10-15
在本示例中，我们将详细探讨如何使用jQuery来获取多选框（checkbox）的值，同时了解相关的jQuery事件响应和页面元素属性获取方法。 首先，我们需要了解jQuery的选择器。在jQuery中，`$`符号是库的主入口点，用于...
checkbox组件.zip
08-20
在描述中提到的“基于vue的element组件Checkbox多选框【竖向多列】展示”，意味着我们将讨论如何在Vue项目中使用Element UI的Checkbox组件来创建一个垂直排列的多列多选框。 首先，我们需要了解Checkbox组件的基本...
Vue动态生成el-checkbox点击无法赋值的解决方法
12-03
最近遇到一个问题，在一个页面需要动态渲染页面内的表单，其中包括 checkbox 表单类型，并且使用 Element 组件 UI 时，此时 v-model 绑定的数据也是动态生成的 例如： 定义的 data 的 form 里面是空对象，需要动态...
vue .js绑定checkbox并获取、改变选中状态的实例
10-18
-- 更多复选框... --> ``` 这里，`v-bind:true-value`和`v-bind:false-value`指令用于指定选中和未选中时对应的值。例如，当复选框`#m_nh3`被选中时，`mFormData.bd_3`的值为3；未选中时，其值为`checkFalseValue`...
vue+element 循环多组 checkbox实现
老菜鸟ios学习足迹
01-11 833
【代码】vue+element 循环多组 checkbox实现。
Vue3.0发布了，来带你看看变化
一再问究竟的博客
09-22 398
vue2.0 vs vue3.0 1.重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势： （1）可直接监听数组类型的数据变化 （2）监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升 （3）可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行 （4）直接实现对象属性的新增/删除 2.新增Composition API，更好的逻辑复用和代码组织 3.重构 V
elementui循环复选框，并校验
05-10
假设你有一个包含多个复选框的表单，你可以使用 Element UI 的 el-checkbox 组件来实现。要对这些复选框进行校验，可以使用 Element UI 的表单验证功能。 以下是一个示例，展示如何循环渲染复选框并对它们进行校验： ``` <template> <el-form :model="form" :rules="rules" ref="form" label-width="100px"> <el-form-item label="选择语言"> <el-checkbox-group v-model="form.languages"> <el-checkbox v-for="language in languages" :key="language.value" :label="language.value">{{ language.label }}</el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { languages: [] }, languages: [ { label: 'Java', value: 'java' }, { label: 'Python', value: 'python' }, { label: 'JavaScript', value: 'javascript' }, { label: 'C++', value: 'c++' } ], rules: { languages: [ { required: true, message: '请至少选择一种语言', type: 'array', min: 1 } ] } } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单校验通过，可以提交表单数据 console.log(this.form.languages) } else { // 表单校验不通过，需要处理错误信息 console.log('校验不通过') } }) } } } </script> ``` 在这个示例中，我们使用了 el-checkbox-group 组件来绑定表单数据中的 languages 字段，使用 v-for 指令循环渲染复选框。在表单验证规则中，我们使用了 required 规则来保证至少选择一种语言，并设置了错误提示信息。在提交表单时，我们调用了表单的 validate 方法进行校验，如果校验通过，就可以提交表单数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值