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

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

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

<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. TCP协议是安全的吗?

    2024-02-02 06:28:05       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-02 06:28:05       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-02 06:28:05       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-02 06:28:05       20 阅读

热门阅读

  1. MongoDB数据库自动备份脚本

    2024-02-02 06:28:05       27 阅读
  2. 【灵活设置PostgreSQL的PROMPT1客户端提示符】

    2024-02-02 06:28:05       40 阅读
  3. Less与Sass

    2024-02-02 06:28:05       29 阅读
  4. 【PyQt6】朗读小说西游记

    2024-02-02 06:28:05       39 阅读
  5. 密码输入检测

    2024-02-02 06:28:05       34 阅读
  6. 放苹果#洛谷#dfs#c语言

    2024-02-02 06:28:05       32 阅读
  7. 异步解耦之RabbitMQ(一)

    2024-02-02 06:28:05       38 阅读
  8. RabbitMQ

    RabbitMQ

    2024-02-02 06:28:05      29 阅读
  9. SQL中的left join和right join及具体实例

    2024-02-02 06:28:05       33 阅读