效果图:
1、需要注意:prop="`rateList.${index}.operatorName`" :rules="rules.operatorName"
rateList为form表单里面的数组,index为下标,operatorName为你的value值
<el-form :model="formData" :rules="rules" ref="formData" label-width="130px" :hide-required-asterisk="true">
<div class="mb20">其他设置</div>
<p class="mb10">交易服务费收费标准:</p>
<el-row v-for="(item,index) in formData.rateList" :key="index" >
<el-col :span="5">
<el-form-item label="成交价: ">
<el-col :span="12">
<el-form-item :prop="`rateList.${index}.operatorName`" :rules="rules.operatorName">
<el-select v-model="item.operatorName" @input="forceUpdate" clearable>
<el-option label="大于" value="大于"></el-option>
<el-option label="小于" value="小于"></el-option>
<el-option label="大于等于" value="大于等于"></el-option>
<el-option label="小于等于" value="小于等于"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label=""
:prop="`rateList.${index}.tradePrice`"
:rules="rules.tradePrice">
<el-input v-model="item.tradePrice" @input="forceUpdate"></el-input>
</el-form-item>
</el-col>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="按成交价比例: " :prop="`rateList.${index}.tradeServiceChargePercentForm`" :rules="rules.tradeServiceChargePercentForm">
<el-input v-model="item.tradeServiceChargePercentForm" @input="forceUpdate"><template slot="append">%</template></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="最低收取: " :prop="`rateList.${index}.tradeServiceChargeMin`" :rules="rules.tradeServiceChargeMin">
<el-input v-model="item.tradeServiceChargeMin" @input="forceUpdate"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="最高收取: " :prop="`rateList.${index}.tradeServiceChargeMax`" :rules="rules.tradeServiceChargeMax">
<el-input v-model="item.tradeServiceChargeMax" @input="forceUpdate"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="最小竞价单位: " prop="auctionPriceUnitMin" :rules="rules.auctionPriceUnitMin">
<el-input class="itemWidth" type="number" v-model="formData.auctionPriceUnitMin"><template slot="append">元</template></el-input>
</el-form-item>
<el-form-item label="最低报价限额: " prop="auctionPriceLimitMin" :rules="rules.auctionPriceLimitMin">
<el-input class="itemWidth" type="number" v-model="formData.auctionPriceLimitMin"><template slot="append">元</template></el-input>
</el-form-item>
</el-form>
export default {
data() {
return {
formData: {
rateList:[{},{}]
auctionPriceUnitMin: '',
auctionPriceLimitMin: '',
},
rules: {
operatorName: [{ required: true, message: '请输入'}],
tradePrice: [{ required: true, message: '请输入'}],
tradeServiceChargePercentForm: [{ required: true, message: '请输入'}],
tradeServiceChargeMax: [{ required: true, message: '请输入'},],
tradeServiceChargeMin: [{ required: true, message: '请输入' },],
auctionPriceUnitMin: [{ required: true, message: '请输入' },],
auctionPriceLimitMin: [{ required: true, message: '请输入'},],
},
}
},
methods:{
onSubmit(){
this.$refs['formData'].validate((valid) => {
if (valid) {
console.log('----success---')
}
});
},
}
}
特别注意:当输入的时候输入不进去的时候使用this.$forceUpdate()方法更新视图
或者:为什么明明输入了值,正则判断还是显示不能为空,没有校验内容(这个时候你要查看你是不是赋值了,比如this.formData.rateList=[{},{}]这样的没有定义name,手动试一下赋值空对象
如:rateList:[{operatorName:'',tradePrice:'',tradeServiceChargePercentForm:'',radeServiceChargeMax:'',tradeServiceChargeMin:'',auctionPriceUnitMin:'',auctionPriceLimitMin:''}],
)