Demo: elementplus中select实现触底加载数据(懒加载)

elementplus中select实现触底加载数据(懒加载)

自定义指令 directives.js

const loadMore = {
  beforeMount(el, binding) {
    // 常规获取dom
    // const selectDom = document.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    let selectDomPro = document.querySelector('.popperCustom')
    let firstSelectItem = ''
    if (selectDomPro) {
      firstSelectItem = selectDomPro?.querySelector(
        '.el-select-dropdown .el-scrollbar .el-select-dropdown__wrap'
      )
    }
    function loadMores() {
      const isBase = this.scrollHeight - (this.scrollTop + 3) <= this.clientHeight
      if (isBase) {
        binding.value && binding.value()
      }
    }
    el.selectDomInfo = firstSelectItem
    el.userLoadMore = loadMores
    firstSelectItem?.addEventListener('scroll', loadMores)
  },
  beforeUnmount(el) {
    if (el.userLoadMore) {
      el.selectDomInfo.removeEventListener('scroll', el.userLoadMore)
      delete el.selectDomInfo
      delete el.userLoadMore
    }
  }
}
export default loadMore

使用

<!-- 下拉触底加载--懒加载 -->
            <el-select
              v-else-if="item.type == 'selectPro'"
              v-model="form[item.prop]"
              :placeholder="item.placeholder || `请选择${item.label}`"
              :clearable="item.clearable"
              :disabled="item.disabled"
              :filterable="item.filterable"
              :style="{ width: item.width ? item.width + 'px' : '100%' }"
              v-load-more="loadMoreItems"
              popper-class="popperCustom"
            >
              <el-option
                v-for="option in item.data"
                :key="option.value"
                :label="option.label"
                :value="option.value"
                :disabled="option.disabled"
              />
            </el-select>

事件处理函数

// 加载更多
const loadMoreItems = () => {
  console.log('loadMoreItems')
}

全局挂载 main.js

import directives from '@/utils/directives'

app.directive('load-more', directives)