Element ui el-form嵌套el-table并设置校验_el-form el-table校验

一.实现方法

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

动态增减表单项

1.2实例

1. 因为嵌套关系，el-table的数据绑定的是：data=“form.tableData”
2. 因为表格中的表单项校验需要绑定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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

data() {
  return {
    form: {
          tableData: [
          {name:'',content:''},
          {name:'',content:''}]     
     },
    rules: {
     name: [{
			required: true,
			message: "请输入序号",
			trigger: ["blur", "change"],
		}],
	 content: [{
			required: true,
			message: "请输入内容",
			trigger: ["blur", "change"],
	   }]
	}
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1.3运行结果