小编在用antd vue做select下拉搜索输入框的时候 进入页面 后端接口返回4000多条数据,聚焦select的时候 卡顿n秒以上 后端做了limit分页 我是用纯前端的方式处理的
大概思路讲一下 在data里面创建一个itemData空数组 用于保存请求回来的数据 下拉框展示的又是一个数组selectedEventItem 接口请求回来进行赋值 但是先机截取前50条数据展示 不要展示全 也不符合开发逻辑 没人一上来就展示全部数据的 卡死你
接下来 就是给select做一个search事件为filterItem 这个事件主要是当用户搜索的内容发生改变 立马去itemData里面过滤出来相关的数据 最后赋值给下拉框展示的又是一个数组selectedEventItem 下拉展示 做到模糊搜索一样 还要进行节流操作噢 大概思路就是这样 接下来看下具体代码:
下面是具体的search事件 filter+防抖实现:
好啦 讲完了 祝大家工作顺利 大展宏图 早日暴富 哈哈哈哈哈哈!