vue中el-form通过v-for实现多层嵌套动态表单

需求

表单分为基本信息和事件信息，事件信息中的环节可以动态进行增减；环节中又包括事件，也可以动态进行增减

分析

elementUI中el-form存在动态增减表单项示例，可以以此为参考进行改造

按照需求，表单需要嵌套两层v-for进行实现

关键代码

<div class="link-box" v-for="(node, i) in eventForm.linkList" :key="i">
    <span class="link-item">
        环节{{Number(i+ 1)}}
    </span>
    <div class="node-box">
        <el-form-item
            label="节点名称"
            :prop="'linkList.' + i + '.linkName'"
            :rules="[{ required: true, message: '请输入节点名称', trigger: 'blur' }]"
        >
            <el-input v-model="node.linkName" placeholder="请输入" clearable @input="onInput"></el-input>
        </el-form-item>
        <el-form-item
            label="描述"
            :prop="'linkList.' + i + '.linkDescription'"
        >
            <el-input type="textarea" v-model="node.linkDescription" placeholder="请输入" @input="onInput"></el-input>
        </el-form-item>
        <div class="add-btn-box">
            <el-form-item
                v-for="(item, j) in node.linkEventList"
                :label="'事件' + Number(j+1)"
                :key="j"
                :prop="'linkList.' + i + '.linkEventList.' + j + '.linkEventName'"
            >
                <el-input v-model="item.linkEventName" placeholder="请输入" clearable @input="onInput"></el-input>
                <el-button type="primary" class="add-btn" @click="btnAddClick(item, i)">+</el-button>
                <el-button type="primary" class="remove-btn" @click="btnRemoveClick(item, i)">-</el-button>
            </el-form-item>
        </div>
    </div>
    <div class="add-link-box">
        <el-button type="primary" class="add-link" @click="linkAddClick()">+</el-button>
        <el-button type="primary" class="remove-link" @click="linkRemoveClick(node, i)">-</el-button>
    </div>
</div>

data() {
    return {
        eventForm: {
            eventName: '',
            eventType: '',
            eventDescription: '',
            linkList: [{
              linkName: '',
              linkDescription: '',
              linkEventList: [{linkEventName: ''}],
            }],
        },
    }
}

// 点击环节+按钮
linkAddClick() {
    let obj = { linkName:"", linkDescription: '',linkEventList: [{linkEventName: ''}] };
    this.eventForm.linkList.push(obj);
},
// 点击环节-按钮
linkRemoveClick(node, i) {
    if (this.eventForm.linkList.length == 1) { // 确保页面始终保留1个环节
        return
    } else {
        let index = this.eventForm.linkList.indexOf(node)
        if (index !== -1) {
            this.eventForm.linkList.splice(index, 1)
        }
    }
};


// 点击事件+按钮
btnAddClick(item, i) {
    this.eventForm.linkList[i].linkEventList.push({
        linkEventName: '',
    });
},
//点击事件-按钮
btnRemoveClick(item, i) {
    if (this.eventForm.linkList[i].linkEventList.length == 1) {
        return
    } else {
        let index = this.eventForm.linkList[i].linkEventList.indexOf(item)
        if (index !== -1) {
            this.eventForm.linkList[i].linkEventList.splice(index, 1)
        }
    }
},

注意

1.prop的绑定

2.rules校验规则绑定