需求: 供货价 >= 销售价的一半,不同的城市销售价与供货价可以特别设置
分析: 销售价是变动的,城市也是变动的,所以表单验证的规则也是动态的
解决: 用传参的方式 -> 动态构造表单验证规则
关键查找-> 供货价 :rules="supplyRule(city.goods_price)"
如下:
<!-- 动态规则传参设置如下 -->
<!-- :rules="supplyRule(city.goods_price)" -->
<el-form
:model="cityForm"
ref="moreform"
:rules="rules.moreSpec"
class="city-form">
<div
class="city-item"
v-for="(city, cidex) in cityForm.cityList"
:key="cidex+'citylist'"
>
<el-checkbox class="mb-3" v-model="city.selected">
<span class="city-name">{{city.city_name}}</span>
</el-checkbox>
<div class="city-price-block pl-5">
<el-form-item
class="more-price-item"
:rules="rules.moreSpec.line_price"
:prop="'cityList.'+cidex+'.line_price'">
<el-input class="price-input" v-model="city.line_price" size="small" :disabled="!city.selected" type="number" min="0" inputmode="numeric" pattern="[0-9]*">
<template slot="prepend">划线价</template>
</el-input>
</el-form-item>
<el-form-item
class="more-price-item"
:rules="rules.moreSpec.goods_price"
:prop="'cityList.'+cidex+'.goods_price'">
<el-input class="price-input" v-model="city.goods_price" size="small" :disabled="!city.selected" type="number" min="0" inputmode="numeric" pattern="[0-9]*">
<template slot="prepend">实售价</template>
</el-input>
</el-form-item>
<el-form-item
class="more-price-item"
:rules="supplyRule(city.goods_price)"
:prop="'cityList.'+cidex+'.supply_price'">
<el-input class="price-input" v-model="city.supply_price" size="small" :disabled="!city.selected" type="number" :min="0" inputmode="numeric" pattern="[0-9]*">
<template slot="prepend">供货价</template>
</el-input>
</el-form-item>
</div>
</div>
</el-form>
computed: {
supplyRule() {
return (goods_price) => {
let rule = (rule, value, callback) => {
if (value < goods_price * .5) {
return callback(new Error(`供货价应至少为实售价的一半,即 >= ${goods_price * .5}`))
}else {
callback()
}
}
let supply_price= [
{required: true, message: "请填写价格", trigger: "blur"},
{ validator: rule, trigger: 'blur' }
]
return supply_price
}
}
},
后话:
以上方法一开始仅仅是抱着试一下的想法做看看能不能实现。因为每一个城市都需要有对应的验证规则,而每一个城市的实售价都有可能变动。无法确定这种方法可以保证表单验证可以顺得执行。写完之后意外的发现完全没有问题。
往往觉得不确定的代码写出来都是问题一堆不是吗?可是这次不一样。嘿!也许你也遇到过这种不抱希望的事情却出奇的顺利。以上分享,除了一丁点解决方法之外,还有那么些些意外之喜。