1. 場景描述

不知道你有沒有這樣的經(jīng)歷，下拉框的選項(xiàng)很多，上萬個(gè)選項(xiàng)甚至更多，這個(gè)時(shí)候如果全部把數(shù)據(jù)放到下拉框中渲染出來，瀏覽器會(huì)卡死，體驗(yàn)會(huì)特別不好

用人會(huì)說element-ui的select有一個(gè)remote-method，支持遠(yuǎn)程搜索，我們讓服務(wù)端支持一下不就可以了，當(dāng)然這是一種解決的方案。但是有時(shí)候這種方法有時(shí)候不一定適用

? （1）有時(shí)候服務(wù)端數(shù)據(jù)是經(jīng)過計(jì)算返回給我們的，可能返回不是特別快，體驗(yàn)不是很好

? （2）有時(shí)候數(shù)據(jù)可能只有幾千條，全部渲染又不太合適，一直掉接口不是特別好

? （3）僅僅通過前端能不能解決，如果能解決，豈不是減輕了服務(wù)端的工作和壓力

?

2.解決辦法

? ?提示：element-ui的select有一個(gè)fildter-method方法，我們可以通過這個(gè)方法來進(jìn)行過濾下拉項(xiàng)

? 假設(shè)我們有個(gè)下拉框是用來選擇用戶的

<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()}); },

如上所示，我們從后臺(tái)獲取用戶列表，經(jīng)過我們自己的過濾，我們每次只渲染50條數(shù)據(jù)，無論有多少數(shù)據(jù)，對(duì)我們來說也支持一個(gè)變量，占個(gè)內(nèi)存。當(dāng)然數(shù)據(jù)越多，數(shù)組的遍歷也會(huì)相應(yīng)的慢，但是這個(gè)影響不大。

我們不僅能過濾名字，還可以對(duì)我們制定的任一項(xiàng)進(jìn)行過濾

優(yōu)化：上面的代碼我們還可以適當(dāng)優(yōu)化下，只有發(fā)現(xiàn)了數(shù)組長度超過了50項(xiàng)，我們就停止遍歷

3.效果圖

如上圖所示，我的用戶數(shù)據(jù)大概是2萬條，可以看出響應(yīng)的特別快。

轉(zhuǎn)載于:https://www.cnblogs.com/mianbaodaxia/p/11153341.html

總結(jié)

以上是生活随笔為你收集整理的巧妙解决element-ui下拉框选项过多的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。