antd proform中的select（ProFormSelect）使用

最新推荐文章于 2024-11-14 18:12:11 发布

原创最新推荐文章于 2024-11-14 18:12:11 发布 · 1.7w 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#antd #proform #select

前端专栏收录该内容

66 篇文章

订阅专栏

该段代码展示了如何在ProFormSelect组件中设置多选模式，并利用onChange方法处理网络请求。代码中，select2的值会随着用户选择的变化而更新，请求函数返回一个模拟的省分数据列表，用于填充下拉选项。同时，组件设置了必填规则以确保用户选择。

 <ProFormSelect
                            label="角色可见范围"
                            name="select2"
                            mode="multiple"
                            fieldProps={{//这里使用了select的onChange方法，必须使用这样的写法来进行调用onChange方法
                                onChange:(val) => handleChange(val),
                            }}

                            request={async () =>  {//返回的select网络请求
                                let params = await queryProvince();
                                console.log('获取到的下拉省分为：',params);
                                let res = [];
                                params.map(item =>{
                                    let temp = {};
                                    temp['label'] = item.name;
                                    temp['value'] = item.codeen;
                                    res.push(temp)
                                });
                                console.log('最终组装的数据=',res);
                                // params = [
                                //     { label: '全部', value: 'all' },
                                //     { label: '未解决', value: 'open' },
                                //     { label: '已解决', value: 'closed' },
                                //     { label: '解决中', value: 'processing' },
                                // ]
                                return res
                            }

                            }
                            placeholder="请选择可见省分"
                            rules={[{ required: true, message: '请选择可见范围' }]}
                        />