ProFormSelect支持搜索查询的写法

最新推荐文章于 2024-08-22 11:17:23 发布

bluejad

最新推荐文章于 2024-08-22 11:17:23 发布

阅读量1k

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.csdn.net/bluejad/article/details/131504674

版权

例一

<ProFormSelect
    name="select1"
    label="支持搜索查询的 Select1"
    showSearch
    debounceTime={300}
    request={async ({ keyWords }) => {
        await waitTime(100);
        console.log(
            Mock.mock({
                'data|1-2': [
                    {
                        value: '@id',
                        label: '@name',
                    },
                ],
            }).data.concat({
                value: keyWords,
                label: '目标_target',
            }),
        );
        return [
            {
                "value": "370000201709291787",
                "label": "Thomas Williams"
            },
            {
                "value": "410000200905158447",
                "label": "Edward Davis"
            },
            {
                "label": "目标_target"
            }
        ];
    }}
    placeholder="Please select a country"
    rules={[{ required: true, message: 'Please select your country!' }]}
/>

const waitTime = (time: number = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

例二

<ProFormSelect
    name="select2"
    label="支持搜索查询的 Select2"
    showSearch
    debounceTime={300}
    request={async ({ keyWords }) => {
        await waitTime(100);

        const modelList: any[] | PromiseLike<any[]> = [];

        await getInstrumentModelList(
            {
                current: '1',
                pageSize: '20',
                instrumentModelName: keyWords
            }
        ).then((res) => {
            const result = {
                data: res.rows,
                total: res.total,
                success: true,
            };
            // eslint-disable-next-line array-callback-return
            result.data.map(item => {
                modelList.push({ value: item.instrumentModelId.toString(), label: item.instrumentModelName });
            })

        })
        console.log(modelList);
        return modelList;

    }}
    placeholder="Please select a country"
    rules={[{ required: true, message: 'Please select your country!' }]}
/>

modelList = [
    {
        "value": "1",
        "label": "型号名称20230122"
    },
    {
        "value": "3",
        "label": "1212"
    }
]