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>

寄语:

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


相关推荐
m0_555762903 分钟前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由202014 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem1 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术1 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing1 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止2 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴2 小时前
简单入门Python装饰器
前端·python
lzb_kkk2 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节