el-table滚动加载下一页

// 获取表格对象
  let dom = document.querySelector(".el-table__body-wrapper");
  let that = this;
  dom.addEventListener("scroll", () =>{
    if(!that.addLoading) {
      const scrollDistance =
          dom.scrollHeight - dom.scrollTop - dom.clientHeight;
         // 判断是否到底,可以加载下一页
         if (scrollDistance <= 0) {
           // 判断是否全部加载完成
           if (that.pageParams.page >= that.totalPage) {
             that.$message.warning("已经见底了 ~");
           }
           if (that.pageParams.page < that.totalPage) {
             that.addLoading = true;
             //当前页数小于总页数就请求
             that.pageParams.page++; //当前页数自增
             // 加载下一页方法
             that.getNextList();
           }
         }
       }
    });

把以上代码放在mounted()里,就可以运行啦

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中的`el-table`组件是Element UI库中的表格组件,它支持滚动加载数据(通常称为无限滚动或懒加载)。当用户滚动到表格底部时,如果还有更多数据未展示,滚动加载功能会自动向服务器请求下一页的数据并更新表格内容。 以下是实现滚动加载的基本步骤: 1. 配置`el-table`:设置`scroll-y`属性为true,开启垂直滚动,并给需要监听滚动事件的元素添加`@scroll`事件处理器。 ```html <template> <el-table :data="tableData" :height="tableHeight" @scroll="loadMore"> <!-- ...表头... --> </el-table> </template> <script> export default { data() { return { tableData: [], // 初始数据 tableHeight: '400px', // 设置固定高度或动态计算 page: 1, // 当前页数 pageSize: 10, // 每页显示的行数 }; }, methods: { loadMore() { if (this.tableBottomReached()) { // 判断是否到达底部 this.fetchMoreData(); // 发送请求加载更多数据 } }, fetchMoreData() { this.page++; // 加一,请求下一页 // 这里发送异步请求获取更多数据,例如: axios.get('api/data?page=' + this.page) .then(response => { const newData = response.data; // 新的数据 // 将新数据合并到已有数据中 this.tableData.push(...newData); }) .catch(error => { console.error('Failed to load more data:', error); }); }, tableBottomReached() { // 返回滚动条距离文档底部的距离小于等于某个阈值时的布尔值 const scrollEl = document.querySelector('.el-table'); const clientHeight = scrollEl.clientHeight; const scrollTop = scrollEl.scrollTop + clientHeight; const scrollHeight = scrollEl.scrollHeight; return scrollTop >= scrollHeight - clientHeight; } }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值