认识

2023年02月18日

柏拉文

越努力，越幸运

一、可搜索选项的选择框

---

注意

1. 如果需要搜索选项，那么需要添加a-select-option。如果是配置options,可能会出现无数据的情况

<template>
    <a-select
        v-model:value="currentSelected"
        labelInValue
        showSearch
        placeholder="请选择城市"
        optionFilterProp="children"
        style="width: 100%"
        @change="handleChange"
    >
        <a-select-option v-for='item of cityOptions' :key='item.value' :value="item.value" >{{item.label}}</a-select-option>
    </a-select>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'OftenPage',
    setup() {
        const date = new Date();
        const refs = {
            cityOptions: ref<OptionsList>([]),
        };
        const reactives = {
            currentSelected: reactive<OptionsItem>({
                value: '',
                label: '',
            }),
        };
        const methods = {
            getCityOptions: async (): Promise<OptionsItem[]> => {
                const {
                    data: { data = [] },
                } = await axios.get('/cityList/data/zccitydata.json');
                return data.map((v: CityItem) => {
                    const obj = {
                        label: v.name,
                        value: v.id,
                    };
                    return obj;
                });
            },
            handleChange: async (value: OptionsItem) => {
                await methods.getWeather(value.value);
            },
        };

        onBeforeMount(async () => {
            const result = await methods.getCityOptions();
            refs.cityOptions.value = result;
            reactives.currentSelected.value = refs.cityOptions.value[0].value;
            reactives.currentSelected.label = refs.cityOptions.value[0].label;
        });
        return {
            ...refs,
            ...reactives,
            ...methods,
        };
    },
});
</script>