vue中重新获取数据导致页面加长,要求在页面更新之后浏览器滚动条滚动到之前浏览记录的位置。以及获取当前页面中是哪个元素产生滚动条的方法。

目前的页面样式为:

 代码是:

  <section id="detailSection"><el-tableref="multipleTable":data="logDetailList"style="width: 650px;margin:20px auto;"id="dialogDetail":show-header="false":cell-style="cellStyle"v-loading="formLoading"><el-table-columnclass="log-detail-origin_timestamp"prop="_source.origin_timestamp"label="时间"width="185"></el-table-column><el-table-column class="log-detail-msg" label="查询的log"><template slot-scope="props"><el-buttonclass="asidebtn-up"v-if="props.$index == 0"type="primary"@click="searchUp">向上查询</el-button><el-buttonclass="asidebtn-down"v-if="props.$index == logDetailList.length - 1"type="primary"@click="searchDown">向下查询</el-button></template></el-table-column></el-table></section>

首先获取当前el-table的高度(此处$refs后的multipleTable是在el-table中用ref绑定的值)

 let positionHeight = this.$refs.multipleTable.bodyWrapper.scrollHeight;

其次用接口获取新数据(也就是更新logDetailList里的值),将新数据渲染到页面中。

最后用$nextTick方法在数据渲染完成之后的滚动条定位定到之前的位置上。

(1)获取新数据的el-table长度

let positionHeight2 = this.$refs.multipleTable.bodyWrapper.scrollHeight;

(2)长度相减。新数据页面的长度-旧数据页面长度=当前滚动条滚动位置

let screenHeight = positionHeight2 - positionHeight;

(3)设置滚动条位置。注:scrollTo方法必须是该页面存在滚动条的元素。且必须是el-table的父元素。

document.querySelector(".content-container").scrollTo(0, screenHeight);

这样就完成了。

附加 :

获取当前页面中是哪个元素产生滚动条的方法(vue中):页面滚动后控制台会打印

methods: {    findscroller(element) {element.onscroll = function() {console.log(element);};Array.from(element.children).forEach(this.findscroller);}
}
mounted() {this.findscroller()
}

 或者直接复制以下代码到控制台中。回车,拖动滚动条

function findscroller(element){element.onscroll=function () {console.log(element)}Array.from(element.children).forEach(findscroller)
}
findscroller(document.body)

 

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

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

相关文章

App测试流程及测试点

1 APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间&#xff0c;一般测试时间为两三周&#xff08;即15个工作日&#xff09;&#xff0c;根据项目情况以及版本质量可适当缩短或延长测试时间。正式测试前先向主管确认项目排期。 1.3测试资源…

启动es容器错误

说明&#xff1a;启动es容器&#xff0c;刚启动就停止&#xff0c;查看日志&#xff0c;出现以下错误信息&#xff08;java.lang.IllegalArgumentException: Plugin [analysis-ik] was built for Elasticsearch version 8.8.2 but version 7.12.1 is running&#xff09; 解决&…

【2023】HashMap详细源码分析解读

前言 在弄清楚HashMap之前先介绍一下使用到的数据结构&#xff0c;在jdk1.8之后HashMap中为了优化效率加入了红黑树这种数据结构。 树 在计算机科学中&#xff0c;树&#xff08;英语&#xff1a;tree&#xff09;是一种抽象数据类型&#xff08;ADT&#xff09;或是实作这种…

【洛谷】P4414 [COCI2006-2007#2] ABC

[COCI2006-2007#2] ABC 题面翻译 【题目描述】 三个整数分别为 A , B , C A,B,C A,B,C。这三个数字不会按照这样的顺序给你&#xff0c;但它们始终满足条件&#xff1a; A < B < C A < B < C A<B<C。为了看起来更加简洁明了&#xff0c;我们希望你可以按…

MySQL学习笔记 ------ 分组查询

#进阶5&#xff1a;分组查询 /* 语法&#xff1a; select 分组函数&#xff0c;列&#xff08;要求出现在group by的后面&#xff09; from 表 【where 筛选条件】 group by 分组的列表 【order by 排序的字段】; 注意&#xff1a;查询列表必须特殊&#xff0c;要求是分组函…

ChatGPT在智能电子设备中的应用如何?

ChatGPT在智能电子设备中有着广泛的应用潜力&#xff0c;可以为电子设备提供更智能、更个性化的用户体验&#xff0c;并为用户提供更多便利和高效的功能和服务。智能电子设备是指通过集成计算机、传感器、网络和人工智能等技术&#xff0c;实现智能化的功能和交互的设备。ChatG…

【C#】Lock关键字

一、概述 Lock关键字&#xff0c;确保当一个线程位于代码的临界区时&#xff0c;另一个线程不进入临界区。如果其他线程试图进入锁定的代码&#xff0c;则它将一直等待&#xff08;即被阻止&#xff09;&#xff0c;直到该对象被释放。 Lock关键字属于语法糖&#xff0c;其本…

数据结构【栈和队列】

第三章 栈与队列 一、栈 1.定义&#xff1a;只允许一端进行插入和删除的线性表&#xff0c;结构与手枪的弹夹差不多&#xff0c;可以作为实现递归函数&#xff08;调用和返回都是后进先出&#xff09;调用的一种数据结构&#xff1b; 栈顶&#xff1a;允许插入删除的那端&…

网络知识点之-BGP协议

边界网关协议&#xff08;BGP&#xff09;是运行于 TCP 上的一种自治系统的路由协议。 BGP 是唯一一个用来处理像因特网大小的网络的协议&#xff0c;也是唯一能够妥善处理好不相关路由域间的多路连接的协议。 BGP 构建在 EGP 的经验之上。 BGP 系统的主要功能是和其他的 BGP 系…

How to Use your mac to Read a Word and Repeat it more times

Using the say Command on a Mac 在 Mac 上使用 say 命令 The say command is a fun and useful feature on Mac computers that allows you to convert text to speech using the command line. With this command, you can make your Mac speak anything you type after it…

特征选择策略:为检测乳腺癌生物标志物寻找新出口

内容一览&#xff1a;microRNA&#xff08;小分子核糖核酸&#xff09;是一类短小的单链非编码 RNA 转录体。这些分子在多种恶性肿瘤中呈现失控性生长&#xff0c;因此近年来被诸多研究确定为确诊癌症的可靠的生物标志物 (biomarker)。在多种病理分析中&#xff0c;差异表达分析…

vue3下的uniapp跨域踩坑

uniapp vue3 H5跨域踩坑 开发移动端H5的时候由于后端接口没有做跨域处理&#xff0c;因此需要做下服务器代理&#xff0c;于是百度搜索了uniapp下h5的跨域配置 在manifest下的h5配置proxy&#xff0c;大概是这样: "h5": {"devServer": {"https"…

安全—01day

文章目录 1. 编码1.1 ASCLL编码1.2 URL编码1.3 Unicode编码1.4 HTML编码1.5 Base64编码 2. form表单2.1 php接收form表单2.2 python接收form表单 1. 编码 1.1 ASCLL编码 ASCII 是基于拉丁字母的一套电脑编码系统&#xff0c;主要用于显示现代英语和其他西欧语言。它是最通用的…

对话天壤创始人薛贵荣:AIGC正在成为新的“水煤电”

AIGC正在悄无声息地成为各行各业的必需品。 数科星球原创 作者丨苑晶 编辑丨大兔 国内的大模型混战半年有余&#xff0c;传统互联网巨头和人工智能公司纷纷入场。在“百模大战”的关键时刻&#xff0c;行业悄然发生分化。一些更具前瞻性的企业开始眺望远方&#xff0c;准备打…

ajax/axios访问后端测试方法

文章目录 1、浏览器执行javascript方法GET请求POST请求 2、Postman测试工具GET请求POST请求 3、idea IDE提供的httpclient4、Apache JMeter 1、浏览器执行javascript方法 GET请求 http://localhost:6060/admin/get/123 POST请求 技巧&#xff1a;打开谷歌浏览器&#xff0c…

zookeeper学习(二) 集群模式安装

前置环境 三台centos7服务器 192.168.2.201 192.168.2.202 192.168.2.150三台服务器都需要安装jdk1.8以上zookeeper安装包 安装jdk 在单机模式已经描述过&#xff0c;这里略过&#xff0c;有需要可以去看单机模式中的这部分&#xff0c;注意的是三台服务器都需要安装 安装…

C数据结构与算法——队列 应用(C语言纯享版 迷宫)

实验任务 (1) 掌握顺序循环队列及其C语言的表示&#xff1b; (2) 掌握入队、出队等基本算法的实现&#xff1b; (3) 掌握顺序循环队列的基本应用&#xff08;求解迷宫通路&#xff09;。 实验内容 使用C语言实现顺序循环队列的类型定义与算法函数&#xff1b;编写main()函数…

算法与数据结构(三)--栈

一.栈的基本概念 栈是一种特殊的表&#xff0c;这种表只在表首进行插入和删除操作。 因此&#xff0c;表首对于栈来说具有特殊的意义&#xff0c;称为栈顶。相应的&#xff0c;表尾称为栈底。不含任何元素的栈称为空栈。 栈的修改遵循后进先出的原则&#xff0c;Last In First…

Java前后端交互long类型溢出的解决方案

问题描述&#xff1a; 前端根据id发起请求查找对象的时候一直返回找不到对象&#xff0c;然后查看了请求报文&#xff0c;发现前端传给后台的数据id不对&#xff0c;原本的id是1435421253099634623&#xff0c;可前端传过来的id是 1435421253099634700&#xff0c;后三位变成了…

Zabbix邮件报警(163网易邮箱)

目录 一、电脑登录网易邮箱配置 二、Server端安装配置邮件服务器 邮箱查看 三、编辑zabbix_server.conf 引用邮件脚本 查看邮件 五、配置zabbix web监控项邮件报警 操作思路 Server.zabbix.com web操作 确认报警媒介信息 配置zabbix中的用户所使用的报警媒介类型以及接收邮…