<el-form :model="formData" ref="form">
<el-form-item>
<el-table :data="formData.tableData">
<el-table-column >
<template slot-scope="scope">
<el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="rules.name" style="padding-bottom:15px;">
<el-input v-model="scope.row.name" />
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
<el-button @click="resetForm('form')">重置</el-button>
</el-form-item>
</el-form>
data() {
return {
rules: {
name: [
{ required: true, message: '请输入名字', trigger: 'blur' }
],
},
formData: {
tableData: [{
name: '王小虎',
}, {
name: '王小虎',
}, {
name: '王小虎',
}, {
}]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
注意事项：
1.必须绑定 :model="formData" ref="form"
2.给el-form-item绑定:prop="'tableData.' + scope.$index + '.name'" 和:rules="rules.name"
3.给el-form-item增加style="padding-bottom:15px;" ，校验提示会被挡住显示不出来
