需求:elementui Table表格滚动分页(不使用分页组件),请求数据。
1、自定义加载更多数据的指令,在utils文件夹中创建 loadMore.js
/**
* 加载更多数据的指令
*/
export default {
install(Vue) {
Vue.mixin({
directives: {
loadmore: {
bind(el, binding) {
let bindTime = null
clearTimeout(bindTime)
// eslint-disable-next-line space-before-function-paren
bindTime = window.setTimeout(function () {
var selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener(
'scroll',
// eslint-disable-next-line space-before-function-paren
function () {
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 += 1
if (a === 'down') {
this.isLoading = true
var params = {
page: this.pageNum,
pageSize: this.pageSize,
// 其他参数
...
}
var res = await getDataApi(params)
this.isLoading = false
if (res) {
this.total = res.panelData.total
if (this.total >= this.tableData.length) {
this.tableData = this.tableData.concat(res.panelData.records)
}
}
}
}
}