1. 場(chǎng)景描述
不知道你有沒有這樣的經(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.解決辦法
1 ) 分段加載：也不加載下拉項(xiàng)，通過點(diǎn)擊下拉框的時(shí)候召噩，再去加載母赵，此時(shí)的選項(xiàng)全部加載進(jìn)來，該種情況只適用于緩加載情況具滴，需要點(diǎn)擊加載完后才能下拉選項(xiàng)凹嘲，體驗(yàn)一般。
2 ）提示：element-ui的select有一個(gè)filter-method方法构韵，我們可以通過這個(gè)方法來進(jìn)行過濾下拉項(xiàng)
假設(shè)我們有個(gè)下拉框是用來選擇用戶的
<el-select
v-model="userId"
filterable
:filter-method="userFilter"
clearable>
<el-option
v-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ù)組長(zhǎng)度超過了50項(xiàng)次和，我們就停止遍歷
3.效果圖
