el-select滚动条到底部触发请求

最新推荐文章于 2024-05-16 23:39:45 发布

Daniel李华

最新推荐文章于 2024-05-16 23:39:45 发布

阅读量1.2k

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_44289771/article/details/126873149

版权

本文介绍了如何解决下拉框加载大量数据导致的请求超时问题，通过创建一个Vue指令实现滚动触底时分页加载更多数据。详细步骤包括在src目录下创建loadMore.js，定义指令逻辑，然后在main.js中引入并全局注册。同时，展示了如何结合远程搜索功能，动态加载并过滤数据，以提高用户体验。

摘要由CSDN通过智能技术生成

下拉框一下子请求上万条数据导致请求超时，我们可以使用分页请求，当el-select滚动触底的时候可以触发请求下一页。

1.在src目录下新建directive/loadMore/loadMore.js
2.loadMore.js内容：
指令代码

import Vue from 'vue'
export default {}.install = (Vue, options = {}) => {
  Vue.directive('loadmore', {
    inserted(el, binding) {
      // 获取element-ui定义好的scroll盒子
      const SELECTDOWN_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      SELECTDOWN_DOM.addEventListener('scroll', function() {
        const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
        if (CONDITION) {
          binding.value()
        }
      })
    }
  })
}

3.在main.js中引入该文件。例如：

import loadMore from '@/directive/loadMore/loadMore' // 下拉加载更多
Vue.use(loadMore);

这样就能在全局使用该指令了
4.使用

	<el-select
		v-loadmore="这里是你自己定义的函数"
	>
		
	</el-select>

还可以配上远程搜
HTML

		<el-select
          filterable
          remote
          :remote-method="remoteMethod"
        >
         
        </el-select>

	//远程获取供应商
    async remoteMethod(query){
      const { content } = await findAll({
        name:query,
        currentPage: 1,
        limit: 200,
      });
      let dataList = content.content;
      for (let i = 0; i < dataList.length; i++) {
        for(let j =0 ;j < this.merchantList.length ; j++){//删除全部重复的
          if(this.merchantList[j].value == dataList[i].id){
            this.merchantList.splice(j,1)
          }
        }
        this.merchantList.unshift({ id: dataList[i].id, name: dataList[i].name });//再将最新的插入到第一位
      }
    },