vue element el-select下拉滚动加载的方法
作者：别拿曾经看以后~
很多朋友都遇到这样一个问题在使用vue+element的el-select下拉框加载返回数据太多时，会造成卡顿，用户体验欠佳，这篇文章主要介绍了vue element el-select下拉滚动加载方法,需要的朋友可以参考下
使用vue+element的el-select下拉框加载返回数据太多时，会造成卡顿，用户体验欠佳，记录一个滚动加载的方法：
1、挂载一个全局的方法（main.js）：
// 滚动加载更多
Vue.directive('loadMore', {
bind(el, binding) {
// 获取element，定义scroll
let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
select_dom.addEventListener('scroll', function () {
let height = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (height) {
binding.value()
}
})
}
});2、demo设置（template结构）
<template>
<el-form-item label="所属分类">
<el-select
v-model="curr"
placeholder="分类"
@change="change"
v-loadMore="loadMore"
clearable filterable>
<el-option
v-for="item in list"
:key="item.id"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</template>3、字段设置（data）
data(){
return {
curr:'',
names:[],
list:[],
pageData: {
index: 1,
size: 100
},
}
},4、事件方法（methods）
methods:{
// 加载更多
loadMore() {
this.pageData.index++;
this.sceneData(this.pageData);
},
// 请求数据
async sceneData(){
let self=this
this.names= []; // 清空
let num = this.pageData.index * this.pageData.size;
const {data,code,message}=await apiList({});
if(code===0){
self.names= data
self.list= self.id.filter((item, index, arr) => {
return index < num;
});
}
},
}到此这篇关于vue element el-select下拉滚动加载的文章就介绍到这了,更多相关vue element下拉滚动加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！