1. 场景描述

不知道你有没有这样的经历，下拉框的选项很多，上万个选项甚至更多，这个时候如果全部把数据放到下拉框中渲染出来，浏览器会卡死，体验会特别不好

用人会说element-ui的select有一个remote-method，支持远程搜索，我们让服务端支持一下不就可以了，当然这是一种解决的方案。但是有时候这种方法有时候不一定适用

（1）有时候服务端数据是经过计算返回给我们的，可能返回不是特别快，体验不是很好

（2）有时候数据可能只有几千条，全部渲染又不太合适，一直掉接口不是特别好

（3）仅仅通过前端能不能解决，如果能解决，岂不是减轻了服务端的工作和压力

2.解决办法

提示：element-ui的select有一个fildter-method方法，我们可以通过这个方法来进行过滤下拉项

假设我们有个下拉框是用来选择用户的

<el-selectv-model="userId"filterable:filter-method="userFilter"clearable><el-optionv-for="item in userList":key="item.userId":label="item.username":value="item.userId"></el-option>
</el-select>

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.效果图

如上图所示，我的用户数据大概是2万条，可以看出响应的特别快。

转载于:https://www.cnblogs.com/mianbaodaxia/p/11153341.html

巧妙解决element-ui下拉框选项过多的问题相关推荐

vue下拉框值改变事件_vue和element ui 下拉框select的change事件
1 在线编辑测试工具编辑好代码后点击 run 即可 2 vue原生写法 2.1 html部分新增空 {{ drug.name }} 刪除尚未新增任何資料總金額:{{ totalMoney } ...
elementui下拉框清空_巧妙解决element-ui下拉框选项过多的问题
1. 场景描述不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好用人会说element-ui的select有一 ...
element ui 下拉框搜索功能
正常的下拉框就是这样的,但是临时加需求说需要下拉框里面的信息不存在或者太多的时候,希望自己搜索想要的数据嗯~听产品的~解决了一下代码如下 <el-select :placeholder=&q ...
element ui下拉框实现
<template><el-select v-model="value4" clearable placeholder="请选择">&l ...
element ui 下拉框选择年份
<template><div class="wrap"><el-select v-model="form.recentYear" ...
Easyexcel导出带下拉框选项excel模板
需求:导出的excel模板,表头字段动态生成.sheet页下拉框内容动态生成解决思路:为了避免excel下拉框选项过多会导致内容不显示,将下拉框的内容都存储在另一个新建的固定的sheet页,再通过引 ...
iview select选中值取值_完美解决iview 的select下拉框选项错位的问题
在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉框组件.但是当弹出框超过一屏需要滚动时,select的下拉选项会出现错位(下图1为正常,图2为滚动后,下拉选项错位.) ...
iview select 怎么清空_如何解决iview 的select下拉框选项错位的问题，具体操作如下...
下面我就为大家分享一篇完美解决iview 的select下拉框选项错位的问题,具有很好的参考价值,希望对大家有所帮助. 在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉 ...
java导出Excel增加下拉框选项，解决小数据量和大数据量下拉框选项的问题
文章目录 java导出Excel增加下拉框选项一.小数据量情况二.大数据量情况 java导出Excel增加下拉框选项(java结合easyExcel) 添加传参模型ConsumablesAddDT ...

巧妙解决element-ui下拉框选项过多的问题

1. 场景描述

2.解决办法

3.效果图

巧妙解决element-ui下拉框选项过多的问题相关推荐

最新文章

热门文章