表格滚动分页查询

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();

},

相关推荐
excel8 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel9 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙12 小时前
[译] Composition in CSS
前端·css
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix12 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780012 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端12 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧12 小时前
Promise 的使用
前端·javascript