表格滚动分页查询

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

},

相关推荐
之歆几秒前
Linux 系统安装、故障排除、sudo、加密、DNS 与 Web 服务整理
linux·运维·前端
OpenTiny社区6 分钟前
TinyEngine 2.10 版本发布:零代码 CRUD、云端协作,开发效率再升级!
前端·vue.js·低代码
哟哟-11 分钟前
Nginx配置:静态文件访问时动态添加时间戳
运维·前端·javascript·nginx
码云数智-园园19 分钟前
自助建站哪个好?三款主流自助建站对比评测
前端
肆忆_23 分钟前
C++ 汇编层面与语法语义层面总结:this指针 模板 块级作用域 引用
前端
用户40993225021226 分钟前
Vue中默认插槽、具名插槽、作用域插槽如何区分与使用?
前端·vue.js·github
zheshiyangyang31 分钟前
前端面试基础知识整理【Day-3】
前端·word
用户982361079027736 分钟前
Vite 项目优化分包填坑之依赖多版本冲突问题深度解析与解决方案
前端
陆枫Larry39 分钟前
深入浅出:CSS 中的“隐形结界”——BFC 详解
前端·css
wuhen_n40 分钟前
JavaScript 深拷贝的完全解决方案
前端·javascript