vue，表单 动态添加信息项

效果图：

代码示例：

<template>
    <div class="eventInfo">
        <div class="header">
            <div class="header_top">
                <span>{{ title }}</span>
                <span class="close" @click="close()">x</span>
            </div>
        </div>
        <div class="body">
            <div class="peopleChoose" v-for="(item, index) in items" :key="item.id">
                <div class="comm_modal_item" v-for="(_item, _index) in item.children" :key="_item.id">
                    <div class="comm_modal_label">
                        <span class="modal_label_text" v-if="index == 0">
                            <span v-if="_index == 0" class="iconfont icon-plus-circle pointer"
                                onselectstart="return false" @click="addList()"></span>
                            <span v-if="_index == 0 && index == 0">所选应用</span>
                        </span>
                        <span class="modal_label_text" v-if="index > 0">
                            <span v-if="_index == 0" @click="removeList(index)" onselectstart="return false"
                                class="iconfont icon-minus-circle pointer"></span>
                        </span>
                    </div>
                    <div style="width:100%">
                        <div class="input_foreach">
                            <div class="comm_modal_input">
                                <span class="and" v-if="_index > 0">且</span>
                                <input :ref="`关键词${_item.id}`" type="text" v-model="_item.keyword" />
                            </div>
                            <div class="comm_modal_label_right">
                                <span v-if="_index == 0" class="iconfont icon-plus-circle pointer"
                                    onselectstart="return false" @click="add(index, item)"></span>
                                <span v-if="_index > 0" class="iconfont icon-minus-circle pointer"
                                    onselectstart="return false" @click="remove(index, _index)"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <button class="confirm" @click="success()">确定</button>
            <button class="cancel" @click="close()">取消</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "eventInfo",
        props: {
            title: {
                type: String,
                default: "12",
            },
            msg: {
                type: Number,
                default: 12,
            },
        },
        data() {
            return {
                items: [{
                        id: 1,
                        children: [{
                                id: 1,
                                name: "事件1",
                                keyword: "12",
                            },
                            {
                                id: 2,
                                name: "事件2",
                                keyword: "2",
                            },
                        ],
                    },
                    {
                        id: 2,
                        children: [{
                            id: 1,
                            name: "事件1",
                            keyword: "23",
                        }, ],
                    },
                ],
            };
        },
        mounted() {},
        methods: {
            // 字符串拼接
            spliceStr() {
                let temp = "";
                this.items.forEach((item) => {
                    temp += "/";
                    item.children.forEach((_item, index) => {
                        temp += _item.keyword ?
                            `${index != 0 ? "|" : ""}${_item.keyword}` :
                            "";
                    });
                });
                return temp;
            },

            // 随机生成id
            roandMound(number = 10000) {
                return `${+new Date()}${Math.round(Math.random() * number)}`;
            },
            // 列表添加
            addList() {
                let info = this;
                let empty = info.isFirstEmpty() ? info.isFirstEmpty() : false;
                let num1 = this.roandMound();
                let num2 = this.roandMound();
                let num3 = this.roandMound();
                if (empty.flag) {
                    info.$nextTick(() => {
                        info.$refs[
                            `关键词${
              info.items[empty.parentChildIndex].children[empty.childIndex].id
            }`
                        ][0].focus();
                    });
                } else {
                    this.items.push({
                        id: num1,
                        name: `事件${num1}`,
                        children: [{
                                id: num2,
                                name: `事件${num2}`,
                                keyword: "",
                            },
                            {
                                id: num3,
                                name: `事件${num3}`,
                                keyword: "",
                            },
                        ],
                    });
                }
            },
            // 单个增加
            add(index, item) {
                let info = this;
                let empty = this.isItemEmpty(item) ?
                    this.isItemEmpty(item) :
                    {
                        flag: false,
                    };
                // 如果没有空的，则添加
                if (!empty.flag) {
                    let idx = this.roandMound();
                    this.items[index].children.push({
                        id: idx,
                        name: `事件${idx}`,
                        keyword: "",
                    });
                }
                // 如果没有空的，添加一组数据然后聚焦
                if (!empty.flag) {
                    info.$nextTick(() => {
                        info.$refs[
                            `关键词${
              info.items[index].children[info.items[index].children.length - 1]
                .id
            }`
                        ][0].focus();
                    });
                }
                //   如果是空的，直接定位到指定位置聚焦
                if (empty.flag) {
                    info.$nextTick(() => {
                        info.$refs[
                            `关键词${info.items[index].children[empty.childIndex].id}`
                        ][0].focus();
                    });
                }
            },
            // 单个删除
            remove(index, _index) {
                this.items[index].children.splice(_index, 1);
            },
            // 列表删除
            removeList(index) {
                this.items.splice(index, 1);
            },
            // 判断第一个没有内容的input框
            isFirstEmpty() {
                for (let i = 0; i <= this.items.length - 1; i++) {
                    for (let j = 0; j <= this.items[i].children.length - 1; j++) {
                        if (this.items[i].children[j].keyword == "") {
                            return {
                                id: this.items[i].id,
                                chirdenId: this.items[i].children[j].id,
                                parentChildIndex: i,
                                childIndex: j,
                                flag: true,
                            };
                        }
                    }
                }
            },
            // 判断，改行数据是否为空
            isItemEmpty(item) {
                for (let i = 0; i <= item.children.length - 1; i++) {
                    if (item.children[i].keyword == "") {
                        return {
                            chirdenId: item.children[i].id,
                            childIndex: i,
                            flag: true,
                        };
                    }
                }
            },
            close() {
                this.remove();
            },
        },
    };
</script>

<style lang="less" scoped>
    .eventInfo {
        .body {
            min-height: 300px;

            .peopleChoose {
                .comm_modal_item {
                    display: flex;
                    // height: 60px;
                    line-height: 60px;

                    .comm_modal_label {
                        width: 151px;
                        text-align: right;
                        margin-right: 20px;

                        .modal_label_text {
                            .icon-plus-circle {
                                color: #468de8;
                                margin-right: 3px;
                            }
                        }
                    }

                    .input_foreach {
                        width: 100%;
                        display: flex;
                    }

                    .comm_modal_input {
                        position: relative;
                        display: inline-block;
                        width: calc(100% - 10%);

                        .and {
                            position: absolute;
                            left: -20px;
                            top: -31px;
                            font-size: 12px;
                        }
                    }

                    .comm_modal_label_right {
                        display: inline-block;

                        .icon-plus-circle,
                        .icon-minus-circle {
                            margin-left: 5px;
                            color: #468de8;
                        }

                        .icon-minus-circle {
                            color: #cccccc;
                        }
                    }
                }
            }
        }
    }
</style>