vue 字典列表下拉选择组件

父组件引用

<code-select :type="2" @selected="getCodeVal($event,'education')"></code-select>

getCodeVal(e,name){
    this.expert[name] = e;
}

子组件

<template>
    <Select v-model="codeVal" @on-change="emitVal">
        <Option v-for="item in list" :value="item.className" :key="item.id">{{ item.className }}</Option>
    </Select>
</template>
<script>
/*
*字典下拉框
*   :type 获取字典值，1专家类型，2学历，3学位，4职称级别
*   @selected 向父组件广播所选值
*/

import {findCode } from '@/api/api'
    export default {
        name:'codeSelect',
        props:{
            type:{
                type:Number//获取字典值，1专家类型，2学历，3学位，4职称级别
            }
        },
        data () {
            return {
                list:[],
                codeVal: '',
            }
        },
        methods: {
            getCodeList(){
                findCode({type:this.type}).then(res =>{
                    if(res.data.code == 200){
                        this.list = res.data.info
                    }else{
                        this.list = []
                    }
                })
            },
            emitVal(){
                this.$emit('selected',this.codeVal);
            }
        },
        mounted() {
            this.getCodeList();
        },
    }
</script>