在from组件中有时候我们需要将FormItem实现循环验证。
循环代码,:prop="'items[' + i + '].value'" :rules="ruleValidate.value" 用于循环判断
<FormItem
v-for="(item, i) in formData.items"
:key="item.id"
:required="true"
>
<Select v-model="item.name" style="width: 153px">
<Option
v-for="item in materialsDataList"
:value="item.name"
:key="item.value"
>{{ item.name }}</Option
>
</Select>
<FormItem :prop="'items[' + i + '].value'" :rules="ruleValidate.value">
<Input
v-model="item.value"
placeholder="请输入料品重量"
style="width: 120px"
type="number"
><span slot="append">{{ item.unit }}</span></Input
>
</FormItem>
<FormItem
label="单价:"
:prop="'items[' + i + '].unitPrice'"
:rules="ruleValidate.unitPrice"
>
<Input
v-model="item.unitPrice"
placeholder="请输入料品单价"
style="width: 120px"
type="number"
><span slot="append">元/{{ item.unit }}</span></Input
>
</FormItem>
</FormItem>
验证代码
addDataRules: {
name: [
{
required: true,
message: "名称不能为空",
trigger: "blur",
},
],
value: [
{
required: true,
validator: validatePass,
trigger: "blur",
},
],
unitPrice: [
{
required: true,
validator: validatePass,
trigger: "blur",
},
],
},