<template>
<Row v-for="(ind,index) in AllData.monthTickets" :key="index" style="margin-bottom: 10px">
<Card>
<Alert type="warning">{{ ind.remark }}</Alert>
<div style="display: flex;flex-direction: row;justify-content: space-between">
<div style="display: flex;flex-direction: column">
<div v-for="(m1, index1) in 2" :key="'m1'+m1" class="freightClass">
<Row>
<Col span="8">
<FormItem label="重量区间:" :prop="'freightPrice[' + index + '][' + index1 + '].minimum'">
<Input size="large" placeholder="请输入" v-model="list.freightPrice[index][index1].minimum"
style="width: 100px"/>
</FormItem>
</Col>
<Col span="8">
<FormItem label="-" :prop="'freightPrice[' + index + '][' + index1 + '].highest'">
<Input placeholder="请输入" size="large"
v-model="list.freightPrice[index][index1].highest"
style="width: 100px"/>
</FormItem>
</Col>
</Row>
<FormItem label="首重价格:" :prop="'freightPrice[' + index + '][' + index1 + '].firstHeavyPrice'">
<Input placeholder="请输入" size="large" v-model="list.freightPrice[index][index1].firstHeavyPrice"/>
</FormItem>
<FormItem label="续重价格:" :prop="'freightPrice[' + index + '][' + index1 + '].continuedHeavyPrice'">
<Input placeholder="请输入" size="large"
v-model="list.freightPrice[index][index1].continuedHeavyPrice"/>
</FormItem>
</div>
</div>
</div>
</Card>
</Row>
</template>
iview自带用循环来动态校验输入框,但循环多个input会同时加上校验规则。
ruleValidate: {
"freightPrice[0][0].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
"freightPrice[0][0].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
"freightPrice[0][1].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
"freightPrice[0][1].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
"freightPrice[1][0].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
"freightPrice[1][0].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
"freightPrice[1][1].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
"freightPrice[1][1].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
"freightPrice[2][0].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
"freightPrice[2][0].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
"freightPrice[2][1].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
"freightPrice[2][1].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
"freightPrice[3][0].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
"freightPrice[3][0].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
"freightPrice[3][1].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
"freightPrice[3][1].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
"freightPrice[0][0].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
"freightPrice[0][1].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
"freightPrice[0][0].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
"freightPrice[0][1].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
"freightPrice[1][0].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
"freightPrice[1][1].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
"freightPrice[1][0].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
"freightPrice[1][1].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
"freightPrice[2][0].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
"freightPrice[2][1].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
"freightPrice[2][0].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
"freightPrice[2][1].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
"freightPrice[3][0].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
"freightPrice[3][1].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
"freightPrice[3][0].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
"freightPrice[3][1].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
},
效果图
本文暂时没有评论,来添加一个吧(●'◡'●)