el-select下拉数据多实现懒加载数据

y0912y

已于 2024-07-08 15:32:03 修改

阅读量3.1k

点赞数 1

分类专栏：前端vue 文章标签： vue.js elementui 前端

于 2022-12-23 10:57:23 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_56475385/article/details/128417088

版权

前端vue 专栏收录该内容

11 篇文章

订阅专栏

当Element-UI的el-select组件包含大量数据时，滚动会变得卡顿。为了解决这个问题，可以采用移动端的下拉加载更多策略。首先在main.js中定义一个自定义指令`selectLoadMore`，监听滚动事件。然后在Vue组件中使用这个指令，并实现`selectLoadMore2`方法，分页加载数据。通过这种方式，只有在滚动到接近底部时才会加载更多的选项，显著提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-select下拉选项数据如果太多会很卡（我这里上万条）解决的方法有很多我这里用的是类似于移动端下滑加载更多

先在main.js里面定义自定义指令也可以用文件引入方式，看个人。

Vue.directive('selectLoadMore', {
  bind(el, binding) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      if (this.scrollHeight - this.scrollTop < this.clientHeight + 1) {
        binding.value()
      }
    })
  }
})

然后使用vue文件使用

this.getEnterpriseInformationPage方法是自己的初始化查询

  getEnterpriseInformationPage() {
            getEnterpriseInformationPage(this.queryParamsOp2).then(res => {
                this.queryParamsOp2.total = res.data.total
                this.options2 = this.options2.concat(res.data.list);
            })
        },

 <el-select v-model="form.enterpriseId" placeholder="请选择企业" filterable
                        v-selectLoadMore="selectLoadMore2" :remote-method="parentOperatorNameChange2">
                        <el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id + ''" />
                    </el-select>

  //下滑加载
        selectLoadMore2() {
            this.queryParamsOp2.pageNo = this.queryParamsOp2.pageNo + 1;  //查询搜索参数
            if (this.queryParamsOp2.pageNo > this.queryParamsOp2.total) return;
            this.getEnterpriseInformationPage(); //查询方法
        },

 //远程搜索
        parentOperatorNameChange2(query) {
            if (query !== "") {
                this.queryParamsOp2.name = query;
                this.queryParamsOp2.pageNo = 1;
                this.getEnterpriseInformationPage();
            } else {
                this.options2 = [];
            }
        },