请问10万条数据 使用element-ui的transfer展现 有什么比较好的办法不卡吗

Question

目前我使用了前端分页，10万条数据 每页20条 分5000页，这样展现倒是可以了，但是搜索的话，要遍历10万条数据 还是很慢很慢

item.rawData.filter((obj) => { 
      obj.label.indexOf(val) > -1 
      console.log('updateAllCheckedEnd', new Date().getTime() - start)
    })

这是我使用transfer的搜索方法，去filter10万条数据，不通过后端 前端可以解决这个问题吗

Answer 1

我想到了几个方法你试下能不能解决你的问题

1. 通过setTimeout创建宏任务，十万条数据可以分批查询，这样每一批数据查完可以让js引擎做一些其他任务，不至于一下卡死。
2. 通过webworker多线程，让子线程去执行运算任务，这样就防止了主线程的阻塞。
3. 数据都存到indexDB中，查询的时候在indexDB中查询，indexDB书web端的数据库，文档：indexDB

Answer 2

为啥在前端做搜索，先不谈搜索，如果一次性把10w条记录返回到浏览器，一来后端取这么多记录就比较慢，再把这么大的内容传输到客户端，网速也是问题。在后端做检索，把结果返回到前端不香么

Answer 3

建议换个vxe-table插件，省事；
虚拟滚动：https://xuliangzhan_admin.git...