vue字典下拉選擇元件

<template>
    <div>
        <Select v-model="selected" @on-change="getVal">
            <Option v-for="item in codeList" :value="item.classCode" :key="item.classCode">{{ item.className }}</Option>
        </Select>
    </div>
</template>

<script>
/**
 * @props classType {Number} 字典的classType參數
 * @emit  on-change  觸發父元件的on-change事件，傳遞選擇的類型value
 */
import {getCodeList} from "@/api/api";
    export default {
        name: 'codeSelect',
        props:{
            classType:{
                type: Number,
                default: false
            }
        },
        data() {
            return {
                codeList:[],
                selected:null
            }
        },
        methods: {
            getDataList() {
                this.codeList = [];
                let params ={
                    page: 1,
                    rows: 100,
                    classType: this.classType
                }
                getCodeList(params).then(res => {           
                    if (res.code == 200) {
                    this.codeList = res.info;

                    }
                });
            },
            getVal(){
                this.$emit('on-change',this.selected);
            }
        },
        mounted(){
            this.getDataList();
        }
    }
</script>

<style  scoped>
    
</style>