element-u i表格内表单验证-by 于十月

需求背景

有时候我们会有这么一种需求就是动态的去追加一行删减一行表格row，然在在row里面又会有多个表单控件，并且这个控件都是需要进行校验的，比如必须填写，手机号校验等等。

实现思路 .vue

• data

	data() {
		return {
			teamGroups: {
				rules: {
					teamName: [{ required: true, message: '请输入成员名称', trigger: 'blur' }],
					phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
					address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
				},
				tableData: []
			}
		}
	}

• template

<el-form :model="teamGroups" :rules="teamGroups.rules" ref="form">
	<el-table :data="teamGroups.tableData">
		<el-table-column label="姓名" align="center" header-align="center">
			<template slot-scope="cope">
				<el-form-item :prop="'tableData.' + scope.$index + '.teamName'" :rules="teamGroups.rules.teamname">
				<el-input size="mini" v-model="scope.row.teamName"></el-input>
			</el-form-item>
			</template>
		</el-table-column>
	</el-table>
</el-form>

参考 表单相关文档 动态增减表单项