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>