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

Hermione_log2024-02-02 21:42

以下.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>

寄语：

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