Element-Ui Select下拉框无限滚动调分页接口(自定义指令)

需求:

想要一次加载10条数据，滚动条加载到底部触发下一个十条数据，无限循环直到无数据

一、首先在src下创建一个js文件，完成自定义指令的编写

directives.js

javascript 复制代码

import Vue from 'vue'

export default () => {
  Vue.directive('selectScroll', {
    bind (el, binding) {
    //  如上图，我通过v-if来控制了两个select框，当没有binding.arg这个参数时，我只能监听到企业类型下的select框，所以，我通过传参控制了监听的哪个select框
      var className = '.' + binding.arg
      el.className = binding.arg
      // 获取滚动页面DOM
      const SCROLL_DOM = el.querySelector(`${className} .el-select-dropdown .el-select-dropdown__wrap`)
      // const SCROLL_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap")
      SCROLL_DOM.addEventListener('scroll', function () {
        // 当前的滚动位置 减去  上一次的滚动位置
        // 如果为true则代表向上滚动，false代表向下滚动
        const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
        // 如果已达到指定位置则触发
        if (CONDITION) {
          // 将滚动行为告诉组件
          binding.value()
        }
      })
    }
  })
}

二、在main.js中引入

javascript 复制代码

import Directives from './views/directives'
Vue.use(Directives)

三、然后应用 v-selectScroll="handleScroll"

javascript 复制代码

<el-select 
	v-model="form.productId" 
	v-selectScroll="handleScroll" 
	// v-selectScroll:selectName="handleScroll"  // !!!!!!!
	placeholder="请选择产品" 
	@change="handleProductId"  
	class="item-width">
  <el-option
   	v-for="item in productLists"
    :key="item.id"
    :label="item.name"
    :value="item.id">
  </el-option>
</el-select>
export default {
  data() {
    return {
      itemList: [], // 下拉框选项列表
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数量
      hasMoreItems: true, // 是否还有更多选项
    };
  },
  methods: {
    handleScroll() {
      if (this.hasMoreItems) {
          // 增加当前页码
          this.currentPage++

          // 调用分页接口，传递搜索关键字和分页参数
          this.loadMoreData()
        }
    },
    loadMoreData() {
      // 调用你的分页接口，传递搜索关键字和分页参数
      // 例如，你可以使用 axios 库发送请求
      // 注意根据你的接口返回的数据格式进行适当的修改
      axios
        .get('/your-api-url', {
          params: {
            keyword: '', // 传递搜索关键字
            page: this.currentPage, // 传递当前页码
            pageSize: this.pageSize, // 传递每页显示的数量
          },
        })
        .then((response) => {
          //是否可以继续滚动调接口 根据你每一页多少来写这个三元
          this.hasMoreItems = response.data.length > 9 ? true : false
          // 处理接口返回的数据
          const data = response.data;
          this.itemList = this.itemList.concat(data.items); // 将新的选项添加到列表中
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};