elementUI 表格滚动分页加载请求数据

需求：elementui Table表格滚动分页（不使用分页组件），请求数据。

1、自定义加载更多数据的指令，在utils文件夹中创建 loadMore.js

/*** 加载更多数据的指令*/
export default {install(Vue) {Vue.mixin({directives: {loadmore: {bind(el, binding) {let bindTime = nullclearTimeout(bindTime)// eslint-disable-next-line space-before-function-parenbindTime = window.setTimeout(function () {var selectWrap = el.querySelector('.el-table__body-wrapper')selectWrap.addEventListener('scroll',// eslint-disable-next-line space-before-function-parenfunction () {if (this.scrollTop == 0) {binding.value('up', this)return false}if (this.clientHeight + this.scrollTop + 1 >= this.scrollHeight) {binding.value('down', this)}},false)}, 200)}}}})}
}

2、在main.js中添加以下代码

import loadMore from './utils/loadMore';
Vue.use(loadMore);

3、组件中使用

// 该处涉及项目，其他属性参考elementui文档 v-loadMore即自定义指令
<template><el-table :loading="isLoading" v-loadmore="getData"></el-table>
</template>data() {return {isLoading:false,pageSize: 30,pageNum: 1,total: 0,tableData: []}
}methods: {// 请求数据async getData(a) {this.pageNum += 1if (a === 'down') {this.isLoading = truevar params = {page: this.pageNum,pageSize: this.pageSize,// 其他参数...}var res = await getDataApi(params)this.isLoading = falseif (res) {this.total = res.panelData.totalif (this.total >= this.tableData.length) {this.tableData = this.tableData.concat(res.panelData.records)}}}}}