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

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

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

进入页面的时候绑定监听

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

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

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

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