<template>
<div>
<div v-for="(item,index) in list">
<Form :ref="item.id" :model="item" :label-width="80" style="width: 300px">
<FormItem :label="item.id" prop="value" :rules="{required: true, message: 'item'+item.id+'不能为空', 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(item.id)">Submit</Button>
</FormItem>
</Form>
</div>
<Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
id:'1',
value: '',
index: 1,
status: 1
},
{
id:'2',
value: '',
index: 1,
status: 1
}
],
}
},
methods: {
handleSubmit(name) {
this.$refs[name][0].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleReset(name) {
this.$refs[name][0].resetFields();
},
handleAdd() {
this.list.push(
{
id:'3',
value: '',
index: 1,
status: 1
}
);
},
handleRemove(index) {
this.list.splice(index,1);
}
}
}
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。