antd vue select 搜索输入框数据量大 卡顿问题

2,735 阅读1分钟

小编在用antd vue做select下拉搜索输入框的时候 进入页面 后端接口返回4000多条数据,聚焦select的时候 卡顿n秒以上 后端做了limit分页 我是用纯前端的方式处理的

大概思路讲一下 在data里面创建一个itemData空数组 用于保存请求回来的数据 下拉框展示的又是一个数组selectedEventItem 接口请求回来进行赋值 但是先机截取前50条数据展示 不要展示全 也不符合开发逻辑 没人一上来就展示全部数据的 卡死你

接下来 就是给select做一个search事件为filterItem 这个事件主要是当用户搜索的内容发生改变 立马去itemData里面过滤出来相关的数据 最后赋值给下拉框展示的又是一个数组selectedEventItem 下拉展示 做到模糊搜索一样 还要进行节流操作噢 大概思路就是这样 接下来看下具体代码:

image.png

image.png

下面是具体的search事件 filter+防抖实现:

image.png

image.png

好啦 讲完了 祝大家工作顺利 大展宏图 早日暴富 哈哈哈哈哈哈!