此項(xiàng)目基于element-ui边翁，意在封裝可創(chuàng)建目錄的下拉框蝶桶，返回?cái)?shù)組形式的值
主頁(yè)面

<template>
<div id="app">
    <model-select v-model="form.datas"></model-select>
    <el-button @click="show">show</el-button>
    <router-view/>
</div>
</template>
<script>
import modelSelect from './model-select.vue'
export default {
    components: { modelSelect },
    data() {
        return {
            form: {
                datas: [{
                    key: '101',
                    value: '馬化騰'
                }, {
                    key: '102',
                    value: '李彥宏'
                }]
            }
        }
    },
    methods: {
        show() {
            console.log(this.form.datas)
        }
    }
}

</script>

子組件model-select.vue

<template>
    <el-select @change="change" v-model="selVal" multiple collapse-tags filterable allow-create default-first-option placeholder="請(qǐng)選擇">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
</template>
<script>
export default {
    props: ['value'],
    data() {
        return {
            selVal: [],
            options: []
        }
    },
    methods: {
        change(vals) {
            this.options = vals.map(item => {
                return {
                    key: this.findIdByName(item),
                    value: item
                }
            })
            this.$emit('input', this.options)
        },
        /** 從歷史數(shù)據(jù)中找到原有id */
        findIdByName(name) {
            let obj = this.value.find(item => item.value === name)
            return obj ? obj.key : undefined
        }
    },
    watch: {
        "value": {
            handler(vals) {
                if(vals) {
                    this.options = JSON.parse(JSON.stringify(vals))
                    this.selVal = vals.map(item => item.value)
                }
            },
            deep: true,
            immediate: true
        }
    }
}
</script>
<style lang="scss">

運(yùn)行結(jié)果

看起來(lái)已經(jīng)滿足需求，如果用計(jì)算屬性好像更簡(jiǎn)便一點(diǎn)

<template>
    <el-select @change="change" v-model="selVal" multiple collapse-tags filterable allow-create default-first-option placeholder="請(qǐng)選擇">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
</template>
<script>
export default {
    props: ['value'],
    data() {
        return {
            selVal: [],
        }
    },
    computed: {
        options() {
            return this.selVal.map(item => {
                return {
                    key: this.findIdByName(item),
                    value: item
                }
            })
        }
    },
    methods: {
        change(vals) {
            this.$emit('input', this.options)
        },
        /** 從歷史數(shù)據(jù)中找到原有id */
        findIdByName(name) {
            let obj = this.value.find(item => item.value === name)
            return obj ? obj.key : undefined
        }
    },
    watch: {
        value: {
            handler(vals) {
                if(vals) {
                    this.selVal = vals.map(item => item.value)
                }
            },
            deep: true,
            immediate: true
        }
    }
}
</script>