<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/