<template>
<Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px">
<FormItem
v-for="(item, index) in formDynamic.items"
v-if="item.status"
:key="index"
:label="'Item ' + item.index"
:prop="'items.' + index + '.value'"
:rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
<Row>
<Col span="18">
<Input type="text" v-model="item.value" placeholder="Enter something..."></Input>
</Col>
<Col span="4" offset="1">
<Button @click="handleRemove(index)">Delete</Button>
</Col>
</Row>
</FormItem>
<FormItem>
<Row>
<Col span="12">
<Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button>
</Col>
</Row>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button>
<Button @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
</template>
iview自带用循环来动态校验输入框,但循环多个input会同时加上校验规则。
可以改为这样
<template>
<Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px">
<FormItem
v-for="(item, index) in formDynamic.items"
v-if="item.status"
:key="index"
:label="'Item ' + item.index">
<Row>
<Col span="18">
<FormItem
:prop="'items.' + index + '.value'"
:rules="{required: true, message: 'Item1 不能为空', trigger: 'blur'}">
<Input type="text" v-model="item.value" placeholder="Enter something..."></Input>
</FormItem>
</Col>
<Col span="18" style="margin-top:20px">
<FormItem
:prop="'items.' + index + '.value1'"
:rules="{required: true, message: 'Item2 也不能为空', trigger: 'blur'}">
<Input type="text" v-model="item.value1" placeholder="Enter something..."></Input>
</FormItem>
</Col>
<Col span="18" style="margin-top:20px">
<Input type="text" v-model="item.value2" placeholder="Enter something..."></Input>
</Col>
<Col span="4" offset="1">
<Button @click="handleRemove(index)">Delete</Button>
</Col>
</Row>
</FormItem>
<FormItem>
<Row>
<Col span="12">
<Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button>
</Col>
</Row>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button>
<Button @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
</template>
将 :prop=" "
:rules=" "提取出来,单独添加到不同的输入框
以到达分别动态校验效果