网站建设 企炬,泉州网络白名单,网站做反向解析,集团做网站1. 场景描述不知道你有没有这样的经历#xff0c;下拉框的选项很多#xff0c;上万个选项甚至更多#xff0c;这个时候如果全部把数据放到下拉框中渲染出来#xff0c;浏览器会卡死#xff0c;体验会特别不好用人会说element-ui的select有一个remote-method#xff0c;支…1. 场景描述不知道你有没有这样的经历下拉框的选项很多上万个选项甚至更多这个时候如果全部把数据放到下拉框中渲染出来浏览器会卡死体验会特别不好用人会说element-ui的select有一个remote-method支持远程搜索我们让服务端支持一下不就可以了当然这是一种解决的方案。但是有时候这种方法有时候不一定适用(1)有时候服务端数据是经过计算返回给我们的可能返回不是特别快体验不是很好(2)有时候数据可能只有几千条全部渲染又不太合适一直掉接口不是特别好(3)仅仅通过前端能不能解决如果能解决岂不是减轻了服务端的工作和压力2.解决办法1 ) 分段加载也不加载下拉项通过点击下拉框的时候再去加载此时的选项全部加载进来该种情况只适用于缓加载情况需要点击加载完后才能下拉选项体验一般。2 )提示element-ui的select有一个fildter-method方法我们可以通过这个方法来进行过滤下拉项假设我们有个下拉框是用来选择用户的1 3 filterable4 :filter-methoduserFilter5 clearable6 8 :keyitem.userId9 :labelitem.username10 :valueitem.userId11 12 userFilter(query ) {let arr this.allUserList.filter((item) {return item.username.includes(query) || item.userId.includes(query)})if (arr.length 50) {this.userList arr.slice(0, 50)} else {this.userList arr}},getUserWhiteList() {HttpRequest.post(/api/admin/community/getUserWhiteList).then(response {this.allUserList response.data.list;this.userFilter()});},如上所示我们从后台获取用户列表经过我们自己的过滤我们每次只渲染50条数据无论有多少数据对我们来说也支持一个变量占个内存。当然数据越多数组的遍历也会相应的慢但是这个影响不大。我们不仅能过滤名字还可以对我们制定的任一项进行过滤优化上面的代码我们还可以适当优化下只有发现了数组长度超过了50项我们就停止遍历3.效果图
