el-select下拉加载（实现懒加载）

情况：项目出现了下拉数据量过大，出现页面卡死问题，反馈到我这；
当时实现思路1.使用render函数去渲染下拉框
试了发现卡死情况依然存在，所以尝试方法2

2.使用原生js去添加下拉框的<option>
页面卡死情况没了，但是变成原生select，数据量大很难找到对应的人要下拉去找很久；
只能说不完美没达到我预想。

百度了发现一篇地址：https://segmentfault.com/a/1190000017812498?utm_source=tag-newest 下拉懒加载的操作，我就借鉴了
实现代码：

<el-select

v-model="userId"

:filterable='true'

:default-first-option='true'

v-el-select-loadmore="loadmore"

placeholder="请选择用户">

<el-option

v-for="(item,index) in userItems"
:label="item.name"

:value="item.id"

:key="index"></el-option>

</el-select>

data(){

return {

userItems: [],//下拉数组

formData: { //下拉参数

pageIndex: 1,

pageSize: 20

},
users:[] //总数组

}

一个指令v-el-select-loadmore：

directives: {

'el-select-loadmore': {

bind(el, binding) {

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

}

});

}

一个方法：loadmore

// 下拉加载

loadmore() {

this.formData.pageIndex++;

this.getUsers(this.formData);

getUsers(v) {

let num = ~~this.formData.pageIndex * ~~this.formData.pageSize;

this.userItems = this.users.filter((item, index, arr) => {

return index < num;

});

如此实现刚进页面显示前20条数据，往下滚动显示更多数据，就实现了懒加载。

还有几个待优化点：1下拉搜索是已加载的数据中找，而不是全部数据。2已选中未加载数据怎么办;

别的不多说我去优化了。可能有后续，发现自己变懒了博客变少了。

巴特西

el-select下拉加载（实现懒加载）

最新文章

热门文章