表格滚动分页查询

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

},

相关推荐
Mike_jia13 分钟前
uuWAF:开源Web应用防火墙新标杆——从工业级防护到智能防御实战解析
前端
掘金安东尼22 分钟前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
袁煦丞22 分钟前
群晖NAS FTP远程文件仓库全球访问:cpolar内网穿透实验室第524个成功挑战
前端·程序员·远程工作
前端小巷子27 分钟前
JS 打造动态表格
前端·javascript·面试
excel38 分钟前
从卷积到全连接:用示例理解 CNN 的分层
前端
UNbuff_040 分钟前
HTML 各种事件的使用说明书
前端·html
Mr. Cao code43 分钟前
探索OpenResty:高性能Web开发利器
linux·运维·服务器·前端·nginx·ubuntu·openresty
百思可瑞教育1 小时前
ActiveMQ、RocketMQ、RabbitMQ、Kafka 的全面对比分析
vue.js·分布式·rabbitmq·rocketmq·activemq·北京百思可瑞教育·百思可瑞教育
li35749 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj9 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js