RequestSelect.vue

<template>
    <a-select
        :value="value"
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="Please select"
        allow-clear
        :options="data"
        @change="onChange"
        v-bind="$attrs"
    />
</template>

<script>
import { formatObj } from '@/utils';

export default {
    model: {
        prop: 'value',
        event: 'change',
    },
    props: {
        value: [String, Number, Array],
        request: Function,
        formatData: { type: Object, default: undefined },
        getName: Function,
    },
    data() {
        return {
            data: [],
        };
    },
    async mounted() {
        if (this.request) {
            const newArr = await this.request();
            this.data = this.formatData ? await formatObj(newArr, this.formatData) : newArr;
        }
    },
    methods: {
        onChange(val, opt) {
            this.$emit('change', val);
            this.getName && this.getName(opt?.componentOptions?.children[0]?.text || '');
        },
    },
};
</script>