Element ui el-form嵌套el-table并设置校验-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element ui el-form嵌套el-table并设置校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.实现方法

1.1参考element ui 官网动态增减表单项

动态增减表单项
element plus table form嵌套对象验证,element ui,vue.js,javascript,elementui

1.2实例

因为嵌套关系，el-table的数据绑定的是：data=“form.tableData”

因为表格中的表单项校验需要绑定prop字段，这个字段根据表格索引动态绑定所以添加校验时需要注意表单的prop属性是动态的，例如 :prop=“‘tableData.’ + scope.$index + ‘.name’”
，另外prop中的最后一个属性必须要和v-model中绑定同一个属性


<el-form ref="form" :rules="rules" :model="form">
	<el-table :data="form.tableData">
			<el-table-column label="序号" prop="name">
				<template slot-scope="scope">
					<el-form-item :prop="`tableData.${scope.$index}.name`"
						:rules="rules.name">
						<el-input type="text"  v-model="scope.row.name" clearable></el-input>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="内容" prop="content">
				<template slot-scope="scope">
					<el-form-item :prop="`tableData.${scope.$index}.content`"
						:rules="rules.content">
						<el-input type="text"  v-model="scope.row.content" clearable></el-input>
					</el-form-item>
				</template>
			</el-table-column>

		</el-table>
</el-form>

data() {
  return {
    form: {
          tableData: [
          {name:'',content:''},
          {name:'',content:''}]     
     },
    rules: {
     name: [{
			required: true,
			message: "请输入序号",
			trigger: ["blur", "change"],
		}],
	 content: [{
			required: true,
			message: "请输入内容",
			trigger: ["blur", "change"],
	   }]
	}
    }
  }
}