ParameterSelect.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, getReq } from '@/utils';

export default {
    model: {
        prop: 'value',
        event: 'change',
    },
    props: {
        value: [String, Number, Array],
        staticKey: String,
        formatData: { type: Object, default: undefined },
        getName: Function,
    },
    data() {
        return {
            data: [],
        };
    },
    async mounted() {
        const formatData = this.formatData || { value: 'paramValue', label: 'paramName', key: 'paramId' };
        const newArr = await getReq('/api/v1/parameters/business/multi/list', {
            queryList: this.staticKey,
        });

        const curData = newArr.find((i) => i.key === this.staticKey);
        this.data = await formatObj(curData.businessParameterList || [], formatData);
    },
    methods: {
        onChange(val, opt) {
            this.$emit('change', val);
            this.getName && this.getName(opt?.componentOptions?.children[0]?.text || '');
        },
    },
};
//
</script>