首先在vue项目中的main.js文件添加一个监听el-table滚动条事件的自定义指令,以供全局使用

// 监听el-table滚动
Vue.directive('loadmore', {
  bind(el, binding) {
    const selectWrap = el.querySelector('.el-table__body-wrapper')
    selectWrap.addEventListener('scroll', function() {
      let sign = 0
      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight - 1
      if (scrollDistance <= sign) {
        binding.value()
      }
    })
  }
})

在el-table标签上加上定义在全局的滚动指令,v-loadmore=“自定义名”

<el-table ref="tableData"
            v-loadmore="loadMore"
            v-loading="loading"
            :data="tableData"
            border
            stripe
          >...</el-table>

在使用到el-table的页面中的methods方法中使用该自定义指令对应的函数名。

    // 表格滚动加载事件
    loadMore() {
         console.log('触发滚动加载事件')
    }
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐