url_select.vue

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

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

export default {
    props: {
        url: String,
        labelFiled: String,
        valueFiled: String,
    },
    data: () => ({
        options: [],
    }),

    model: {
        prop: 'value',
        event: 'change',
    },

    watch: {
        url: 'getData',
    },

    methods: {
        async getData() {
            if (this.url) {
                this.options = formatObj(await getReq(this.url), {
                    label: this.labelFiled,
                    value: this.valueFiled,
                    key: this.valueFiled,
                });
            }
        },
    },

    mounted() {
        this.getData();
    },
};
</script>