一个简单的获取内容的办法
表格部分,主要是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();}},
}