【el-table滚动事件】el-table表格滚动时，获取可视窗口内的行数据

接口写好了吗2025-07-29 20:38

一个简单的获取内容的办法
表格部分，主要是ref写一下

javascript 复制代码

 <el-table :data="tableData" ref="tableRef"> </el-table>

进入页面的时候绑定监听

javascript 复制代码

mounted(){
// 绑定滚动事件
                this.$nextTick(() => {
                    const table = this.$refs.tableRef;
                    const scrollBody = table.$el.querySelector(".el-table__body-wrapper");

                    // 1. 手动绑定滚动事件
                    scrollBody.addEventListener("scroll", this.fangdou);

                    // 2. 初始计算一次可视行
                    this.fangdou();

                    // 3. 监听窗口变化（可选）
                    window.addEventListener("resize", this.fangdou);
                });
}

函数部分，增加了一层防抖。滚动停止再执行，不然执行的太频繁了

逻辑就是算出可视区域的高度，然后行要固定高，每行的高度你算一下或者写个固定的多少，这样就可以通过可视高度/行高得到，目前一次能拿到多少条。然后通过滚动条到顶部的位置距离，算出已经滚动过去多少个了，最后算出来的数量在表格内数组里抽数据

javascript 复制代码

methods(){
				fangdou(e) {
                    // 清除之前的定时器
                    if (this.scrollTimer) clearTimeout(this.scrollTimer);
                    // 设置新的定时器（延迟500ms执行）
                    this.scrollTimer = setTimeout(() => {
                        this.handleScroll();
                    }, 500);
                },
                handleScroll() {
                    const table = this.$refs.tableRef;
                    const scrollBody = table.$el.querySelector(".el-table__body-wrapper");

                    // 获取滚动位置和可视区域高度
                    const scrollTop = scrollBody.scrollTop;
                    const visibleHeight = scrollBody.clientHeight;
                    // 计算起始行和结束行索引
                    const startIndex = Math.floor(scrollTop / 50);
                    const endIndex = Math.min(startIndex + Math.ceil(visibleHeight / 50), this.tableData.length - 1);
                    // 获取可视行数据
                    const visibleRows = this.tableData.slice(startIndex, endIndex);
                    this.wdArr = [];
                    visibleRows.forEach((item) => {
                        // 未读状态，并有考核的数据才查看是否已读
                        if (item.is_read !== 1 && item.khf) {
                            this.wdArr.push(item.id);
                        }
                    });
                    // 这里写你要做的事
                    if (this.wdArr.length > 0) {
                        this.edit_read();
                    }
                },
}