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)
  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

goto_w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值