element-ui 選択ドロップダウン ボックスをスクロールしてさらに読み込む

ドロップダウン ボックスのデータが多すぎると、読み込みが非常に遅くなるため、ページングを使用して表示し、スクロール イベントをリッスンしてページング効果を実現します。

Vue カスタム ディレクティブを使用して実行しました。

1. src配下に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 './utils/select-scroll'
Vue.use(Directives)

三、使う

<el-select
  v-model="Id"
  v-selectScroll:selectName="handleScroll"   //这行最重要(传参)
  // v-selectScroll="handleScroll"   //这行最重要(不传参)
  filterable
  clearable
  placeholder="请选择"
>
  <el-option
    v-for="(item,index) in options"
    :key='index'
    :label="item.name"
    :value="item.id"
  ></el-option>
</el-select>

検索機能もつけたのでかなり問題が多い

公式ドキュメントを参照してください。

https://cn.vuejs.org/guide/reusability/custom-directives.html