Element-Ui Select ドロップダウン ボックス無限スクロール ページング インターフェイス (カスタム コマンド)

要件:
一度に 10 個のデータをロードする場合、スクロール バーが一番下までロードされて次の 10 個のデータがトリガーされ、データがなくなるまでループが継続します。

1. まずsrc配下にjsファイルを作成し、カスタム命令
directives.jsの記述を完了します。

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()
        }
      })
    }
  })
}

2. main.jsでの導入

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

3. 次に、v-selectScroll="handleScroll" を適用します。

<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);
        });
    },
  },
};