Ant Design 的 Select 组件怎么优雅应对大数据量情况下的预填值?

331 天前
 WangLiCha

标题可能不太好说清楚,我具体描述下场景:

项目里用了 Ant Design ,里面有一个表单包含一个 Select 组件,这个组件的 options 通过接口获取,接口返回的全部数据量可能非常大(比如 1000 个吧),所以设置为默认下拉只通过接口获取 50 个选项,用户可以通过设置了 showSearch 的搜索来搜索到更具体的选项值。

这个表单同时还可以编辑修改,当再次进入表单界面后,后端接口返回了 Select 组件上次提交的 value 值,表单根据这个值进行了 setFieldValue 的操作,但是因为默认的 options 只获取了前 50 个,所以很有可能这个 value 对应的 label 并不在当前的 options 里面,用户看到的就是一串 code 而非他能看懂的文字。

那么有什么办法可以让用户在使用这个页面的时候可以非常自然的使用呢?初次可以通过搜索选取值,后期修改进入进入界面看到的不是 code ,再次点击修改也能正常完成操作?(当然肯定不会考虑接口同时返回全部数据的做法,不然也不会想尽办法折腾了)

823 次点击
所在节点    前端开发
6 条回复
orange2023
330 天前
进入表单编辑页的时候,使用上次选择的 value 和 label ,设置一次 Select 的 options 。
WangLiCha
330 天前
@orange2023 这里的问题在于后端没法返回 label 值……当然也可以再去调接口查询,但是显得很笨拙
CrushMiss
329 天前
@WangLiCha select 标签有一个 labelInValue 属性,可以把 value 变更为{label,value}的形式,保留这样的格式存取就可以了
Xavier08
322 天前
labelInValue ,回显的时候会用这个对象里的 label ,不会从选项里匹配
AtlantaANiu
317 天前
接口加查询字段,把当前的选项 id 传给后端并要求返回
h18163303390
311 天前
很简单的排序业务逻辑,首先前端肯定解决不了这个问题的,每次请求 50 条数据,后端把这个 code 排到第一个,每次查的时候带着这个 code 去查,避免后面再次出现这个 code 的 option ,如果做下拉加载的话就让后端再出一个接口反查分页参数

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/946437

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX