标题 前后相互校验 实时输入实时校验
<el-form :rules="rules2" :model="form" ref="ruleForm2">
<el-table
ref="tableRef"
:data="form.tableData"
style="width: 100%"
:cell-style="cellStyle"
class="znv-table dark-table "
>
<el-table-column
align="center"
label="第一个数"
prop="T1"
>
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.T1'"
:rules="rules2.T1"
style="margin-top:10px"
>
<el-input
v-model="scope.row.T1"
@blur="checkBlur(scope.$index)"
@input="form2CheckInput"
>
</el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
align="center"
label="第二个数"
prop="T2"
>
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.T2'"
:rules="rules2.T2"
style="margin-top:10px"
>
<el-input
v-model="scope.row.T2"
@blur="checkBlur(scope.$index)"
@input="form2CheckInput"
>
</el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
data() {
let validateT1 = (rule, value, callback) => {
let index = Number(rule.field.split(".")[1]);
if (value < 13 || value > 30 || value == 13 ) {
callback(new Error("14~30"));
} else if (value > this.form.tableData[index].T2) {
callback(new Error(this.$t("strategy[20]")));
} else {
callback();
}
};
let validateT2 = (rule, value, callback) => {
let index = Number(rule.field.split(".")[1]);
if (value < 13 || value > 30) {
callback(new Error("14~30"));
} else if (value < this.form.tableData[index].T1) {
callback(new Error(this.$t("strategy[21]")));
} else {
callback();
}
};
rules2: {
T1: [
{
required: true,
message: this.$t("strategy[24]"),
trigger: "change"
},
{
validator: validateT1,
trigger: "change"
}
],
T2: [
{
required: true,
message: this.$t("strategy[24]"),
trigger: "change"
},
{
validator: validateT2,
trigger: "change"
}
],
}
checkBlur() {},
form2CheckInput() {
this.$refs.ruleForm2.validate()
},