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'"
					
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24