VUE动态表单校验

本文介绍了如何在Vue.js中实现动态表单的验证,包括同时添加多条数据的校验逻辑,通过示例代码详细解析了具体实现过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

VUE动态表单校验

  • 功能描述
    用户可以添加一个员工,也可以同时添加多个员工,但是每个员工的对应表单都存在表单校验

  • 效果图
    在这里插入图片描述![

  • 代码如下

<!--  -->
<template>
	<div class=''>
		<!-- 添加员工信息弹出层 -->
		<el-dialog title="添加员工" :visible.sync="dialogTableVisible" @close="handleClose">
			<div>
				<div class="popSubTitle">
					请在下面输入员工的姓名、手机号码、角色和工作地点,并点击“保存”按钮。您每次可以添加最多5个员工。
				</div>
				<div class="inputTable">
					<div class="inputTable_header">
						<el-row :gutter="20">
							<el-col>姓名</el-col>
							<el-col>工作地点</el-col>
							<el-col>角色</el-col>
							<el-col>手机号码</el-col>
						</el-row>
					</div>
					<div class="input_info">
						<el-form :model="input_list" :rules="rules_add" :inline="true" ref="input_list" label-width="100px" class="demo-ruleForm" size="mini">
							<el-row v-for="(item,index) in input_list.powerAttrList" :key="index">
								<!-- 姓名 -->
								<el-form-item label=""
									:prop="'powerAttrList.' + index + '.name'"
									:rules="rules_add.name" >
									<el-input v-model="item.name" placeholder="请输入姓名"></el-input>
								</el-form-item>
								<!-- 工作地点 -->
								<el-form-item label=
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值