el-select数据过多懒加载的解决(loadmore)

el-select数据过多懒加载的解决数据过多懒加载的解决(loadmore)

主要介绍了el-select数据过多懒加载的解决(loadmore)，小编觉得挺不错的，现在分享给大家，也给大家做个参

考。一起跟随小编过来看看吧

el-select数据过多处理方式数据过多处理方式

在日常项目中el-select组件的使用频率是非常之高的. 当数据过多时渲染时间非常长, 这里提供几个处理方式.

远程搜索远程搜索

组件提供了远程搜索方式, 也就是按照你输入的结果匹配选项.

下拉懒加载下拉懒加载loadMore

filterable

multiple

v-el-select-loadmore="loadmore"

>

<el-option

v-for="item in options"

:key="item.id"

:label="item.label"

:value="item.id">

</el-option>

bind(el, binding) {

// 获取element-ui定义好的scroll盒子

const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');

SELECTWRAP_DOM.addEventListener('scroll', function () {

/**

* scrollHeight 获取元素内容高度(只读)

* scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.

* clientHeight 读取元素的可见高度(只读)

* 如果元素滚动到底, 下面等式返回true, 没有则返回false:

* ele.scrollHeight - ele.scrollTop === ele.clientHeight;

}

}

},

data() {

return {

value: '',

options: [],

formData: {

pageIndex: 1,

pageSize: 20,

methods: {

loadmore() {

this.formData.pageIndex++;

this.getList(this.formData);

},

getList(formData) {