这是个多层的表单,prop有点特别,当然这不是重点,需要实现两个两个input内的数据格式统一,都为数字或都为百分数,效果如下:
组件代码:
<el-col :span="5">
<el-form-item
label="实际值"
v-if="pro.bus_type"
:prop="'pros.' + index + '.actually_indicators'"
:rules="add_object_rules.actually_indicators"
>
<el-input v-model="pro.actually_indicators"> </el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item
label="季度值"
v-if="pro.bus_type"
:prop="'pros.' + index + '.quarterly_indicators'"
:rules="add_object_rules.quarterly_indicators"
>
<el-input v-model="pro.quarterly_indicators"> </el-input>
</el-form-item>
</el-col>
rules:
add_object_rules: {
actually_indicators: [
{
required:true,
validator: checkActValid,
trigger: "blur",
},
],
quarterly_indicators: [
{
required:true,
validator: checkQutValid,
trigger: "blur",
},
]
},
Validate自定义
data() {
var checkActValid = (rule, value, callback) => {
const reg = /^[\d]+%?$/;
if (!value) {
return callback(new Error("请输入实际值"));
}
if (!reg.test(value)) {
return callback(new Error("请输入数字或百分数"));
} else {
this.checkAct = value;
callback();
}
};
var checkQutValid = (rule, value, callback) => {
const reg = /^[\d]+%?$/;
const regNum = /^[\d]+$/;
const regPercent = /^[\d]+%+$/;
if (!value) {
return callback(new Error("请输入季度值"));
}
if (!reg.test(value)) {
return callback(new Error("请输入数字或百分数"));
} else if (
regNum.test(this.checkAct) == regNum.test(value) ||
regPercent.test(this.checkAct) == regPercent.test(value)
) {
callback();} else {
return callback(new Error("实际值和季度值必须统一"));
}
};
}