最近遇到这样一个需求：界面默认显示一组数组，点击新增增加一条并且显示删除按钮，数组里有input和下拉框，每组数组的数据互不影响，效果如下图（图制作的有点简陋）：

代码如下：

<template>
    <div>
        <div class="lk-toolbar" v-for="(name, key) in form" :key="key">
            <el-select size="small" v-model="name.cardName" clearable placeholder="选择渠道" @focus="channelList" @change="channelCard(key)">
                <el-option
                    v-for="item in options"
                    :key="item.uid"
                    :label="item.channelName"
                    :value="item.uid">
                </el-option>
            </el-select>
            <el-input
                size="small"
                v-model="name.cardID"
                placeholder="收款银行卡号"
                auto-complete="off"
                :disabled="disabled">
            </el-input>
            <el-input
                size="small"
                v-model="name.sumMoney"
                placeholder="输入提现金额"
                auto-complete="off">
            </el-input>
            <el-button size="small" @click="deleteItem(key)" v-if="key !== 0">删除</el-button>
        </div>
        <el-button size="small" type="primary" @click="addApplication">添加申请</el-button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            disabled: true,
            form: [{cardName: '', cardID: '', sumMoney: ''}],
            options: {}
        }
    },
    watch: {
    },
    methods: {
        addApplication() {
            this.form.push({cardName: '', cardID: '', sumMoney: ''})
        },
        deleteItem(key) {
            this.form.splice(key, 1)
        },
        channelList() {
            let res = {
                'code': '000',
                'data': [
                    {
                        'uid': 11111,
                        'channelName': '渠道一',
                        'cardNo': '6222600260000000000'
                    },
                    {
                        'uid': 222222,
                        'channelName': '渠道二',
                        'cardNo': '6222600261111111111'
                    },
                    {
                        'uid': 3333333,
                        'channelName': '渠道三',
                        'cardNo': '6222600262222222222'
                    }
                ],
                'message': 'success'
            }
            if (res.code === '000') {
                this.options = res.data
            }
        },
        channelCard(key) {
            let obj = {}
            obj = this.options.find((item) => {
                return item.uid === this.form[key].cardName
            })
            this.form[key].cardID = obj.cardNo
        }
    },
    created() {
    }
}
</script>

解剖一下代码：

1、data 中 form 是默认显示一条数据

2、代码中 @focus="channelList" 下拉框聚焦事件，请求接口数据，返回 data 数据

3、@change="channelCard(key) 选中值发生变化时触发，当前的选中值

4、点击添加申请按钮，直接往 form 里push数据

5、删除按钮就直接splice