Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.4k views
in Technique[技术] by (71.8m points)

求助!前端el-select下拉框数据量过大(100000+)下的展示问题?

### 前端el-select下拉大数据量的优化展示,减少请求和快速响应。

### 现在是将后端返回做了分页处理,然后在下拉框里做了指令操作,下拉加载,可以满足一部分需求,但是在远程搜索匹配的时候就得重新请求模糊查询接口,请问有没有好的解决方案,是将查询的数据先放在前端数据库indexedDB里,然后对这个前端数据库做操作吗?

### 相关代码
粘贴代码文本(请勿用截图)

### 性能优化方案:

  1. 使用 el-select 重新封装组件,叫 (el-select-large)
  2. 在原有的功能上,新增数据缓存功能,将请求出的所有数据保存到控件内部
  3. 在下拉列表框展示时,使用前端分页方式进行加载(按照下拉框大小,分页加载数据)
  4. 在 el-select 搜索时,使用远程查询方式,查询控件内部数据缓存,同时以实现数据回显的问题

实现目标:

  1. 界面加载速度快,页面不崩溃
  2. 数据查询时,能够从全部的数据中进行查询,而不是只在已经展示的数据中查询
  3. 要求已经选择的数据部分,能够正确回显(包括分组模式)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

1、既然后端做了分页处理,限制查询的条数,例如只查询和展示前10条匹配度最高的在前面;
2、如果有1w条的需求,都要在这么小的select展示,这样操作更不人性化了,不如单独出个查询的页面,来查找和换页。(像百度的搜索栏,想想如果全部信息都在select中展示,会是咋样了)。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...