vue element-ui table表格滚动加载方法

我们需要为滚动事件添加一个全局注册事件。在Vue中，我们可以通过自定义指令来实现这一点。以下是一个简单的示例：

```javascript

window.Vue.directive('loadmore', {

bind(el, binding) {

const selectWrap = el.querySelector('.el-table__body-wrapper');

selectWrap.addEventListener('scroll', function() {

let sign = 100; // 用于标记位置

const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight; // 计算滚动距离

if (scrollDistance <= sign) { // 当滚动到距离底部一定位置时触发加载更多事件

binding.value(); // 执行绑定的方法

}

});

}

});

```

```javascript

methods: {

loadMore () {

if (this.loadSign) { // 标记page是否继续递增

this.loadSign = false; // 暂时禁用标记，避免重复加载

this.page++; // 增加页码

if (this.page > 10) { // 避免无限循环加载，设置一个上限值

return;

}

setTimeout(() => { // 模拟数据加载延迟，这里可以根据实际情况调整

this.loadSign = true; // 数据加载完成，重新启用标记

}, 1000);

console.log('到底了', this.page); // 输出当前页码信息，便于调试

}

}

}

```

注：以上文章内容纯属虚构，如有雷同，纯属巧合。