Home在表格的自定义列里面实现自定义验证
实现方法
- 简单来说就是先在 el-table 外面套一个 el-form。
- 然后再在表格的模板 template 里面包含 el-form-item。
- 在绑定 prop 的时候要注意绑定的是每一个 item 的 prop
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :inline-message="true">
<el-table :data="ruleForm.purchaseList">
<el-table-column label="数量" prop="goodsNumber">
<template slot-scope="scope">
<el-form-item :prop="`purchaseList.${scope.$index}.goodsNumber`" :rules="rules.test">
<el-input
size="mini"
type="number"
v-model="scope.row.goodsNumber"
placeholder="请输入数量"
></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table-column>
</el-table>
</el-form>
ruleForm: {
purchaseList: []
},
rules: {
test: [{ required: true, message: "请输入", trigger: "change" }]
}
submitStep() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
})