<template> <div v-for="(AA, index2) in list"> <div v-for="(item, index) in AA.items"> <Form :ref="'formDynamic-'+index" :model="AA" :label-width="80" style="width: 300px"> <FormItem :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> <Button type="primary" @click="handleSubmit('formDynamic-'+index,index2)">Submit</Button> </FormItem> </Form> </div> </div> <Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button></template><script> export default { data() { return { index: 0, list: [ { items: [ { value: '', index: 1, status: 1 } ] }, ], } }, methods: { handleSubmit(name,index) { console.log(index) this.$refs[name][index].validate((valid) => { if (valid) { this.$Message.success('Success!'); } else { this.$Message.error('Fail!'); } }) }, handleReset(name) { this.$refs[name].resetFields(); }, handleAdd() { this.list.push( { items: [ { value: '', index: 1, status: 1 } ] } ); }, handleRemove(index) { this.formDynamic.items[index].status = 0 } } }</script>间接复制到这里查看成果https://run.iviewui.com/