基于Vue3 + Element-ui Plus的表格无限滚动指令

话不多少，直接上代码。

由于Element-ui Plus新版本增加了滚动条的隐藏功能，故原有层级可能存在无效的情况。本文使用的是新版，如无法滚动可尝试使用.el-scrollbar__wrap获取滚动区域元素。

<template>
  <el-table 
     v-table-infinite-scroll="load"
  />
</template>

<script setup>
const vTableInfiniteScroll = {
  mounted(el, binding) {
    let tbody = el.querySelector('.el-scrollbar__wrap') // .el-table__body-wrapper 根据版本不同会有区别
    el.tableInfiniteScrollFn = function () {
      if (this.scrollHeight - this.scrollTop - parseInt(this.style.height) === 0) {
        binding.value()
      }
    }
    tbody.addEventListener('scroll', el.tableInfiniteScrollFn)
    tbody = undefined
  },
  unmounted(el, binding) {
    const tbody = el.querySelector('.el-scrollbar__wrap')
    tbody.removeEventListener('scorll', el.tableInfiniteScrollFn)
    el.tableInfiniteScrollFn = undefined
  }
}


const load = () => {
  console.log('loadmore')
}
</script>

`