elementUi 選択ドロップダウンボックスの底が非同期ページネーションデータをロードします。

visible-changeElement UI では、選択ドロップダウンボックスのイベントをリッスンして、最下部に到達したときに次のページを読み込む効果を実現できます。

方法 1: elementUi イベントを使用する

具体的な手順は次のとおりです。

まず、選択コンポーネントに次のように設定します。@visible-change="handleVisibleChange" ref="mySelect"
現在ロードされているページ番号を記録するには、データ内で変数 pageNum を定義します。pageNum: 1,
handleVisibleChangeドロップダウンボックスの表示と非表示の変更を監視する関数をメソッドで定義します。

handleVisibleChange(visible) {
  if (visible) {
    // 如果下拉框显示
    const selectDropdown = document.querySelector('.el-select-dropdown__wrap');
    // 监听下拉框滚动事件
    selectDropdown.addEventListener('scroll', this.loadNextPage);
  } else {
    // 如果下拉框隐藏
    const selectDropdown = document.querySelector('.el-select-dropdown__wrap');
    // 移除下拉框滚动事件监听
    selectDropdown.removeEventListener('scroll', this.loadNextPage);
  }
},

loadNextPage次のページのデータをロードするメソッドで関数を定義します。

loadNextPage() {
  const selectDropdown = document.querySelector('.el-select-dropdown__wrap');
  // 判断下拉框是否触底
  if (selectDropdown.scrollTop + selectDropdown.offsetHeight >= selectDropdown.scrollHeight) {
    // 触底加载下一页数据
    this.pageNum++;
    // 调用接口请求下一页数据
    // ...
  }
},

方法 2: カスタムコマンドを使用する

まず、この問題では、選択ドロップダウンボックスのスクロールイベントをリッスンするカスタム命令を記述する必要があります。これが最初のステップです。

ステップ 1: 新しい select.js ファイルを作成します。具体的なコードは次のとおりです。

ステップ 2: main.js ファイルにインポートするだけです。もちろん、インポート方法は 2 つあります。以下に紹介します。

1. 最初のインポート方法 (この方法は、プロジェクト内に他のカスタムコマンドがあり、それらをすべて取り込むことはできません) このインポート方法は、直接公開される前述の直接エクスポートのデフォルトです。

import directives from '@/assets/js/directives'
 
Object.keys(directives).forEach(item => {
  Vue.directive(item, directives[item])
})

2. 2つ目の導入方法。vueファイルを直接記述してvueをインポートし、Vue.directive()でコードを記述する方法ですが、この方法の紹介は以下の通りです。

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

上記の手順により、ドロップダウンボックスが一番下に達したときにデータの次のページを自動的にロードする効果を実現できます。ニーズに応じて、対応するインターフェイスを呼び出してデータの次のページを要求し、それをドロップダウンボックスに表示できます。