element表格内多个输入框时如何添加表单校验

以下.vue文件Demo可直接复制运行:

重点:
1:表格数据定义在form里
2:prop需要加索引;索引前的变量不要加form,直接取里边的key,索引后的字段需要和表格里字段属性对应 。:prop="'tableInfo.list.' + scope.$index + '.name'"

javascript 复制代码
<template>
	<el-form ref="form" :model="form">
		<el-table :data="form.tableInfo.list" border>
			<el-table-column align="center" prop="name" label="姓名">
				<template slot-scope="scope">
					<el-form-item :prop="'tableInfo.list.' + scope.$index + '.name'" :rules="ruleForm.name">
						<el-input v-model="scope.row.name" placeholder="请输入姓名"></el-input>
					</el-form-item>
				</template>
			</el-table-column> 
			<el-table-column align="center" prop="age" label="年纪">
				<template slot-scope="scope">
					<el-form-item :prop="'tableInfo.list.' + scope.$index + '.age'" :rules="ruleForm.age">
						<el-input-number placeholder="请输入年纪" v-model="scope.row.age" controls-position="right" :min="1"></el-input-number>
					</el-form-item>
				</template>
			</el-table-column>
		</el-table>
		<el-button @click="handleSubmit()" type="button">提交</el-button>
	</el-form>
</template>

<script>
	export default {
	    components: {},
	    data() {
	      return {
			  form:{
				  tableInfo:{
					  list:[{
						  name:"",
						  age:""
					  },{
						  name:"",
						  age:""
					  }]
				  }
			  },
			  rules:{},
			  ruleForm:{
				  name: [
					  { required: true, message: '请输入姓名', trigger: 'blur' },
				  ],
				  age: [
					  { required: true, message: '请选择年龄', trigger: 'blur' },
				  ],
			  }
		  }
		},
		methods:{
			handleSubmit(){
				let form = this.form;
				this.$refs['form'].validate((valid) => {
					if (valid) {
						
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}
	}
</script>

<style>
</style>

寄语:

人的成熟,是一个从迷茫到自知、从自知到坚定的过程。
在这个过程中,每个人都要慢慢学会扛起自己的责任,学会独自面对生活中的风风雨雨。
所谓成熟,不是年龄长了就叫成熟;而是成长了,能自己去扛事,那才是真正的成熟。


相关推荐
大莲芒1 小时前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react17
前端·react.js·前端框架
xy_optics1 小时前
用matlab探索卷积神经网络(Convolutional Neural Networks)-3
开发语言·matlab·cnn
独好紫罗兰2 小时前
洛谷题单3-P1720 月落乌啼算钱(斐波那契数列)-python-流程图重构
开发语言·算法·leetcode
木木黄木木3 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
慕容莞青3 小时前
MATLAB语言的进程管理
开发语言·后端·golang
jimin_callon3 小时前
VBA第三十八期 VBA自贡分把表格图表生成PPT
开发语言·python·powerpoint·编程·vba·deepseek
Li_Ning213 小时前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一4 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla4 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡4 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript