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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/916771.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/916771.shtml
英文地址,请注明出处:http://en.pswp.cn/news/916771.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OCR 赋能自动阅卷:让评分更高效精准

考试阅卷中&#xff0c;OCR 技术正成为高效助手&#xff0c;尤其在客观题和标准化答题场景中表现亮眼。将考生答题卡扫描后&#xff0c;OCR 能快速识别填涂的选项、手写数字或特定符号&#xff0c;与标准答案比对后自动判分。相比人工阅卷&#xff0c;它能在短时间内完成成百上…

在docker中安装frp实现内网穿透

服务端frps 1.首先在服务器端安装frps docker pull snowdreamtech/frps2.本地创建frps的配置文件frps.ini [common] bind_port 7000 # frp 服务端控制端口 token xxxxx # 客户端认证密钥3.启动frps docker run -d --name frps \ --network host \ --restartalwa…

电脑开机后网络连接慢?

在数字化日益普及的今天&#xff0c;电脑已成为我们工作和生活中不可或缺的工具。但是&#xff0c;可能很多用户都遇到过电脑开机后网络连接慢的情况&#xff0c;这不仅影响了我们的工作效率&#xff0c;还极大降低了上网体验。怎么解决该问题呢&#xff1f;本文分享的这5个方法…

一分钟部署一个导航网站

先看效果1.部署教程 mkdir -p /home/ascendking/mysite cd /home/ascendking/mysite# 安装 WebStack-Hugo 主题git clone https://gitee.com/WangZhe168_admin/WebStack-Hugo.git themes/WebStack-Hugo# 将 exampleSite 目录下的文件复制到 hugo 站点根目录 cd /home/ascendki…

Rust实现微积分与高等数学公式

基于Rust实现高等数学中微积分 以下是基于Rust实现高等数学中微积分相关公式的示例整理,涵盖微分、积分、级数等常见计算场景。内容分为基础公式和进阶应用两类,提供可直接运行的Rust代码片段(需依赖num或nalgebra等库)。 微分运算 导数的数值近似(前向差分) 适用于函…

Android 键盘

基础知识1. 物理键盘&#xff08;Physical Keyboard&#xff09;定义物理键盘指的是设备上真实存在的、可以按压的键盘。例如&#xff1a;早期的 Android 手机&#xff08;如黑莓、摩托罗拉 Milestone&#xff09;自带的 QWERTY 键盘外接的蓝牙/USB 键盘平板或 Chromebook 上的…

SuperClaude Framework 使用指南

SuperClaude Framework 使用指南SuperClaude Framework 是一个开源配置框架&#xff0c;将 Claude Code 从通用 AI 助手转变为专业的上下文感知开发伙伴。该框架通过模板驱动架构应用软件工程原理&#xff0c;为专业软件开发工作流程提供了强大的增强功能。目前该项目处于 v3.0…

Ruby 发送邮件 - SMTP

Ruby 发送邮件 - SMTP 在互联网的世界中,邮件服务已经成为我们日常生活中不可或缺的一部分。而在开发过程中,使用Ruby发送邮件是一项基本技能。SMTP(Simple Mail Transfer Protocol)是互联网上用于发送电子邮件的标准协议。本文将详细介绍如何在Ruby中使用SMTP发送邮件。 …

Docker运行Ollama

1.docker-compose启动ollama 按照 ollama docker-compose配置说明 配置并启动ollama容器&#xff0c;启动成功后&#xff0c;浏览器访问 http://localhost:11434 如果显示如下即代表成功 如果你的服务器支持GPU&#xff0c;可添加GPU参数支持&#xff0c;参考&#xff1a;htt…

轻松管理 WebSocket 连接!easy-websocket-client

在前端开发中&#xff0c;WebSocket 是实现实时通信的核心技术&#xff0c;但原生 WebSocket 的连接管理&#xff08;如断连重连、心跳维护、事件监听&#xff09;往往需要编写大量重复代码。今天给大家分享一个好用的 WebSocket 连接管理库 —— easy-websocket-client&#x…

人工智能赋能社会治理:深度解析与未来展望

一、核心应用场景与技术实现1. 公共安全&#xff1a;智能防控与风险预警技术应用&#xff1a;立体化治安防控&#xff1a;AI摄像头集成人脸识别、行为分析、多目标追踪技术&#xff0c;提升破案率与公共安全能力。例如&#xff0c;深圳某区通过AI系统使盗窃案件破案率提升40%。…

解决使用vscode连接服务器出现“正在下载 VS Code 服务器...”

# 解决使用vscode连接服务器出现“正在下载 VS Code 服务器...”## 首先在vscode的输出中获取 commit idtext [17:17:41.679] Using commit id "c306e94f98122556ca081f527b466015e1bc37b0" and quality "stable" for server 从上面的体制中可以看出&#…

React 项目中使用 Redux 实现公共状态共享

在 React 项目中使用 Redux 实现公共下拉选状态共享并通知各组件更新的完整方案如下&#xff1a;1. 安装 Redux 必要依赖 npm install reduxjs/toolkit react-redux2. 创建 Redux Store 和 Slice store/selectSlice.js import { createSlice } from reduxjs/toolkit;const init…

彻底清理ArcGIS 10.2残留的步骤

文章目录前言一、彻底清理ArcGIS 10.2残留的步骤总结前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、彻底清理ArcGIS 10.2残留的步骤 &#x1f527; 彻底清理ArcGIS 10.2残留的…

JDK主流版本及推荐版本

根据当前Java生态发展&#xff08;截至2025年7月&#xff09;&#xff0c;结合主流企业实践、技术特性和支持周期&#xff0c;以下是JDK主流版本及推荐版本的详细分析&#xff1a;&#x1f9e9; 一、主流JDK版本现状​​JDK 8 (LTS)​​​​使用比例​​&#xff1a;约30-35%&a…

如何从 Web2 转型到 Web3

如何从 Web2 转型到 Web3如何从 Web2 转型到 Web3引言Web2 与 Web3 的核心差异转型的实用步骤1. 打基础&#xff1a;学区块链和 Web3 概念2. 学核心技术栈&#xff1a;从 Solidity 到 dApp3. 重新设计产品&#xff1a;混合模式起步4. 应对坑&#xff1a;技术、监管和安全5. 建社…

RuoYi-Vue 项目 Docker 容器化部署 + DockerHub 上传全流程

本文详细记录本人在实际项目从 RuoYi-Vue 二次开发到 Docker 镜像打包、DockerHub 上传、异地一键部署的完整实战全过程。涵盖前后端打包产物准备、SQL初始化、docker-compose 管理、DockerHub 镜像上传、Gitee 代码管理、子模块大坑、数据库404等所有可能出错细节&#xff0c;…

【C语言进阶】题目练习

目录 1.箭形图案 思路&#xff1a; 代码&#xff1a; 2. 公务员面试 分析&#xff1a; 代码 &#xff1a; 3. 判断结构体大小&#xff08;1&#xff09; 答案&#xff1a; 分析&#xff1a; 4.判断结构体大小&#xff08;2&#xff09; 答案: 分析: 5.宏定义计算…

Blender入门笔记——建模篇(二)

前言 在数字建模的世界中&#xff0c;快捷键和高效的操作是提高工作效率的关键。本手册为您提供了常用的建模快捷键及操作技巧&#xff0c;帮助您在各种建模软件中更加得心应手。无论是进行点、线、面操作&#xff0c;还是调整视图、切换模式&#xff0c;这些快捷方式都将成为…

sqlite3学习---基础知识、增删改查和排序和限制、打开执行关闭函数

目录 一、数据库基础知识 1.分类 2.名词 3.嵌入式数据库 4.特点 5.sqlite3的安装 5.1在线安装 5.2编译 5.3验证是否安装成功 5.4sqlite3的使用 6.创建一个数据库 7.系统维护命令 二、数据库的创建和删除 1.创建一个表 1.1用法 1.2代码示例 2.删除一个表 2.1用…