在實際開發中我們有時無法避免select下拉功能數據過大導致頁面卡頓（如在我在一次迭代中有一個select項接口返回了5000多條數據）。用戶體驗差！結合實際開發給出了3個解決方案：
方案1、select的無限加載；
方案2、select的分段加載；
方案3、select的模糊查詢（此方案如有大量數據，對用戶體現不友好）
此次介紹第一種方案select的無限加載，首先我們需要考慮到功能以后是否復用，本人考慮到以后可能復用次功能，在main.js自定義全局
directive指令。代碼如下：
Vue.directive('loadMore', {
bind(el, binding) {
// 獲取element-ui定義好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
SELECTWRAP_DOM.addEventListener('scroll', function () {
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
if (CONDITION) {
binding.value()
}
})
}
})
注：scrollHeight 獲取元素內容高度(只讀)
scrollTop 獲取或者設置元素的偏移值,常用於, 計算滾動條的位置, 當一個元素的容器沒有產生垂直方向的滾動條, 那它的scrollTop的值默認為0.
clientHeight 讀取元素的可見高度(只讀)
如果元素滾動到底, 下面等式返回true, 沒有則返回false
scrollHeight -
scrollTop ===
clientHeight
data（）{
return {
activityNames: [], // 請求
activityList: [], 過濾后的數據
formData: { // 分頁 一頁20條
pageIndex: 1,
pageSize: 20,
}
}
}
HTML:
<el-select
v-model="dataName"
clearable
placeholder="請選擇活動名稱"
@change="interests_activityName"
filterable
v-loadMore="loadMore"
>
<el-option
v-for="item in activityList"
:key="item.data_code"
:label="item.data_value"
:value="item.data_code"
></el-option>
Js:
// 自定義指令
loadMore() {
this.formData.pageIndex++;
this.activity_sceneNameData(this.formData);
},
//活動名稱
activity_sceneNameData() {
let that = this;
that.dataName = "";
that.activityNames = [];
let num = this.formData.pageIndex * this.formData.pageSize;
request.activityNameData().then((res) => {
that.activityNames = res.data
that.activityList = that.activityNames.filter((item, index, arr) => {
return index < num;
});
})
},
下篇：select的分段加載；若有幫助請關注！！！