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

fanyanjiang

已于 2023-08-30 18:02:09 修改

阅读量1.6k

点赞数 2

文章标签： elementui vue.js 前端

于 2023-07-24 17:31:46 首次发布

本文链接：https://blog.youkuaiyun.com/fanyanjiang/article/details/131901037

版权

文章介绍了一种在ElementUI表格中实现滚动分页的方法，不使用分页组件。它涉及创建一个名为`loadMore`的自定义指令，该指令在`utils`文件夹中的`loadMore.js`中定义。在`main.js`中引入并使用这个指令，然后在组件中绑定到`el-table`上，调用`getData`方法来请求更多数据。当用户滚动到底部时，会自动加载下一页数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：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)
          }
        }
      }
    }
  }