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>

寄语:

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


相关推荐
海天胜景几秒前
vue3 当前页面方法暴露
前端·javascript·vue.js
特立独行的猫a5 分钟前
11款常用C++在线编译与运行平台推荐与对比
java·开发语言·c++
GISer_Jing8 分钟前
前端面试常考题目详解
前端·javascript
VBA63371 小时前
VBA之Word应用第三章第十一节:Document对象的事件
开发语言
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
wjs20241 小时前
SOAP Header 元素
开发语言
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
无限远的弧光灯1 小时前
c语言学习_函数递归
c语言·开发语言·学习
天天向上10242 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
趣多多代言人2 小时前
从零开始手写嵌入式实时操作系统
开发语言·arm开发·单片机·嵌入式硬件·面试·职场和发展·嵌入式