表格滚动分页查询

1.给表格添加id,height="100%"是固定表头

<el-table

id="attr-table-box"

height="100%"

:row-style="{ height: '66px' }"

style="width: 100%; height: 100%; "

>

2.使用计算属性获取总页数

computed: {

// 表格总页数,控制滚动查询 attrTotal是数据总数;

attrTotalPage() {

return Math.ceil(this.attrTotal / this.queryParamsAttr.pageSize);

},

},

3.主要方法
javascript 复制代码
// 属性表格绑定滚动事件,滚动分页查询
    queryByScroll() {
      const _this = this;
      const tableScrollDom =
        document.getElementById("attr-table-box").childNodes[2];
      tableScrollDom.addEventListener("scroll", function () {
        const scrollTop = tableScrollDom.scrollTop;
        const clientHeight = tableScrollDom.clientHeight;
        const scrollHeight = tableScrollDom.scrollHeight;
        if (scrollTop + clientHeight == scrollHeight) {
          // 滚动到底部
          if (_this.attrTotalPage > _this.queryParamsAttr.pageNum) {
            // 如果当前还没到最后一页,滚动到底部以后继续查询
            _this.queryParamsAttr.pageNum++;
            // 请求数据
            _this.getAttrData();
          }
        } else {
        }
      });
    },
4.在mounted里调用

mounted() {

this.queryByScroll();

},

相关推荐
明仔的阳光午后1 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
sorryhc2 小时前
Webpack中的插件流程是怎么实现的?
前端·webpack·架构
残冬醉离殇2 小时前
原来dom树就是AST!!!
前端
~无忧花开~2 小时前
掌握Axios:前端HTTP请求全攻略
开发语言·前端·学习·js
橙某人2 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
小Pawn爷2 小时前
构建Django的Web镜像
前端·python·docker·django
Sailing3 小时前
🚀🚀 从前端到AI Agent开发者,只差这一篇入门指南
前端·后端·ai编程
草帽lufei3 小时前
轻松上手WSL安装与使用
linux·前端·操作系统
San303 小时前
使用 OpenAI API 生成文本与图片:从环境搭建到提示工程完全解析
javascript·人工智能·node.js
TimelessHaze3 小时前
🚀 一文吃透 React 性能优化三剑客:useCallback、useMemo 与 React.memo
前端·javascript·react.js