search_select.vue 1.34 KB
Newer Older
水落(YangLei)'s avatar
水落(YangLei) committed
1 2 3
<template>
    <a-select
        show-search
水落(YangLei)'s avatar
水落(YangLei) committed
4
        class="tw-w-full"
shuiluo's avatar
shuiluo committed
5
        :placeholder="$t('input.placeholder')"
水落(YangLei)'s avatar
水落(YangLei) committed
6 7 8 9 10 11 12 13
        :default-active-first-option="false"
        :show-arrow="false"
        :filter-option="false"
        @search="handleSearch"
        allowClear
        :options="options"
        :mode="mode"
        v-on="$listeners"
水落(YangLei)'s avatar
水落(YangLei) committed
14
        v-bind="$attrs"
水落(YangLei)'s avatar
水落(YangLei) committed
15 16 17 18 19 20 21 22 23 24 25 26
    />
</template>

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

export default {
    props: {
        url: String,
        searchField: String,
        mode: String,
水落(YangLei)'s avatar
水落(YangLei) committed
27 28
        labelFiled: String,
        valueFiled: String,
水落(YangLei)'s avatar
水落(YangLei) committed
29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
    },
    model: {
        prop: 'value',
        event: 'change',
    },
    data() {
        return {
            options: [],
        };
    },
    mounted() {
        this.getData('');
    },
    methods: {
        async getData(searchString) {
水落(YangLei)'s avatar
水落(YangLei) committed
44 45 46 47 48
            this.options = formatObj(await getReq(this.url, { [this.searchField]: searchString }), {
                label: this.labelFiled,
                value: this.valueFiled,
                key: this.valueFiled,
            });
水落(YangLei)'s avatar
水落(YangLei) committed
49 50 51 52 53 54 55 56 57 58
        },
        handleSearch(value) {
            if (this.timeOut) clearTimeout(this.timeOut);
            this.timeOut = setTimeout(() => {
                if (value) this.getData(value);
            }, 300);
        },
    },
};
</script>