VUE2 elementui 动态表单嵌套新增移除

本文主要是介绍VUE2 elementui 动态表单嵌套新增移除，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

VUE2 elementui 动态表单嵌套新增移除
在这里插入图片描述

代码

<template><div><el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogTableVisible"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="name"><el-input v-model="form.name"></el-input></el-form-item><el-card class="box-card" v-for="(item, index) in form.items" :key="index"><div slot="header" class="clearfix"><span>{{ 'Item ' + (index + 1) }}</span><el-button size="mini" type="text" style="float: right; padding: 3px 0;color: #F56C6C;"@click="removeItem(index)">移除</el-button></div><el-form-item :label="'Item ' + (index + 1)"><el-input v-model="item.value" /></el-form-item><el-form-item :label="'Item ' + (index + 1)"><el-input v-model="item.label" /></el-form-item></el-card></el-form><div slot="footer" class="dialog-footer"><el-button @click="addItem">新增项目</el-button><el-button type="primary" @click="submitForm">提交</el-button></div></el-dialog></div></template><script>
export default {data() {return {dialogTableVisible: false,form: {items: [{ value: '' }]}};},methods: {addItem() {this.form.items.push({ value: '', label: '11' });},removeItem(index) {this.form.items.splice(index, 1);},submitForm() {this.$refs.form.validate((valid) => {if (valid) {console.log('提交成功!', this.form);} else {console.log('表单验证失败!');return false;}});}}
};
</script><style>
.box-card {margin: 10px 0;
}
</style>