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

news2024/10/5 21:15:17

目前的页面样式为:

 代码是:

  <section id="detailSection">
    <el-table
      ref="multipleTable"
      :data="logDetailList"
      style="width: 650px;margin:20px auto;"
      id="dialogDetail"
      :show-header="false"
      :cell-style="cellStyle"
      v-loading="formLoading"
    >
      <el-table-column
        class="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-button
            class="asidebtn-up"
            v-if="props.$index == 0"
            type="primary"
            @click="searchUp"
          >向上查询</el-button>
          <el-button
            class="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.coloradmin.cn/o/786933.html

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

相关文章

13 QT资源文件导入

导入资源: 1&#xff1a;将资源文件放入到项目目录下 2&#xff1a;添加资源文件 2.1&#xff1a;右键项目->添加新文件->Qt->Qt Resource file ->给资源文件命名 ex: res ->生成res.qrc 3&#xff1a;编辑资源文件 3.1&#xff1a;添加前缀 3.2&#xff1a;…

荧光效率的测试原理-荧光量子效率测试系统

荧光染料是一种新型染料,它既有常规染料的着色特性,又能发射出荧光,使得织物的饱和度和鲜艳度提高,广泛用于纺织、服装等领域。目前,荧光染料在防伪、分子探针等方面的应用也方兴未艾。由于荧光染料在科技和人们的生活中得到了越来越多的应用,对其测配色的研究也引起了颜色学家…

数据中心蓄电池监测,这个方法太好用了!

在数字化时代&#xff0c;数据机房扮演着至关重要的角色&#xff0c;成为企业和组织保障信息安全和业务稳定运行的关键枢纽。 数据中心的可靠性和持续运行并不仅仅依赖于稳定的电力供应&#xff0c;而是需要多层次的保障措施。其中&#xff0c;蓄电池监控系统作为数据中心不可或…

多城市同城分类信息发布h5公众号系统开发

多城市同城分类信息发布h5公众号系统开发 1&#xff1a;分类信息&#xff0c;商户入驻&#xff0c;红包广告&#xff0c;同城动态&#xff0c;代理加盟。 2&#xff1a;全国版&#xff0c;多城市版&#xff0c;本地版自由切换。 3&#xff1a;付费发帖&#xff0c;付费置顶、付…

【高危】Foxit 福昕PDF阅读器 Field Calculate 释放后使用漏洞(PoC)

漏洞描述 Foxit PDF阅读器是福昕软件公司推出的一款广泛使用的PDF文档阅读器。 在受影响版本中&#xff0c;由于其javascript引擎存在use-after-free漏洞&#xff0c;攻击者可以构造恶意的PDF文件&#xff0c;通过文件中包含的deletePages()等操作使福昕PDF阅读器过早删除与页…

2022 年云南省职业院校技能大赛(高职组) “软件测试”赛项竞赛规程

2022 年云南省职业院校技能大赛(高职组) “软件测试”赛项竞赛规程 一、赛项名称 赛项名称&#xff1a;软件测试 赛项组别&#xff1a;高职组 赛项归属产业&#xff1a; 电子信息大类 二、竞赛目的 (一)检验教学成效 本赛项竞赛内容以《国家职业教育改革实施方案》为设计方针…

一百三十三、Hive——Hive外部表加载含有JSON格式字段的CSV文件数据

一、目标 在Hive的ODS层建外部表&#xff0c;然后加载HDFS中的CSV文件数据 注意&#xff1a;CSV文件中含有未解析的JSON格式的字段数据&#xff0c;并且JSON字段中还有逗号 二、第一次建外部表&#xff0c;直接以&#xff0c;分隔行字段&#xff0c;结果JSON数据只显示一部分…

真实和虚拟相撞,构造的VR展厅特点和优势有哪些?

随着科技的不断发展&#xff0c;VR展厅成为了现代展览的一种全新展现方式&#xff0c;三维立体展厅的设计&#xff0c;让企业、画展、纪念展等可以创造出令人惊叹的虚拟展览空间效果&#xff0c;为用户带来丰富的体验。观众身临其境地感受实体展厅和展品&#xff0c;这种超越了…

【Docker-compose】基于Docker-compose创建LNMP环境并运行Wordpress网站平台

基于Docker compose创建LNMP环境并运行Wordpress网站平台 1.Docker-Compose概述2. YAML文件格式及编写注意事项3. Docker-Compose配置常用字段4.Docker Compose常用命令5.使用Docker-compose创建LNMP环境&#xff0c;并运行Wordpress网站平台5.1 Docker Compose环境安装5.2 使用…

苍穹外卖项目解读(一) 完整代码本地部署运行

前言 HM新出springboot入门项目《苍穹外卖》&#xff0c;笔者打算写一个系列学习笔记&#xff0c;“苍穹外卖项目解读”&#xff0c;内容主要从HM课程&#xff0c;自己实践&#xff0c;以及踩坑填坑出发&#xff0c;以技术&#xff0c;经验为主&#xff0c;记录学习&#xff0…

Tensorflow报错protobuf requires Python ‘>=3.7‘ but the running Python is 3.6.8

报错信息 仔细观察下方命令后&#xff0c;可得运行:python -m pip install --upgrade pip即可 完成后再次执行性安装命令 成功&#xff01;&#xff01;&#xff01;

Windows 10, version 22H2 (updated Jul 2023) 中文版、英文版下载

Windows 10, version 22H2 (updated Jul 2023) 中文版、英文版下载 Windows 10 22H2 企业版 arm64 x64 请访问原文链接&#xff1a;https://sysin.org/blog/windows-10/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org Window…

【SAPABAP] ABAP Memory和 SAP Memory 区别

SAP系统中有两种内存&#xff1a; https://www.ngui.cc/el/2506560.html?actiononClick 1&#xff0c;ABAP Memory 简单说来一个session就是登录SAP系统开的窗口。 可以通过abap内存实现同一session中的数据交换。具体使用到 EXPORT 和IMPORT memory id 语句. 用户登陆后&…

SSRF总结

SSRF ​ SSRF全称&#xff1a;Server-Side Request Forgery&#xff0c;即服务器端请求伪造。 ​ 是一个由攻击者构造请求&#xff0c;在目标服务端执行的一个安全漏洞。攻击者可以利用该漏洞使服务器端向攻击者构造的任意域发出请求&#xff0c;目标通常是从外网无法访问的内…

企业软文怎么写:深度剖析写作技巧!

在当今信息爆炸的时代&#xff0c;企业软文已经成为了企业营销的重要手段之一。一篇高质量的企业软文不仅能够提升企业的品牌知名度&#xff0c;还能够为企业带来实际的经济效益。那么&#xff0c;如何才能写出一篇高质量的企业软文呢&#xff1f;本文伯乐网络传媒将从软文标题…

服务器负载均衡算法有哪些

算法举例 服务器负载均衡算法是用于分配网络流量到多个服务器的策略&#xff0c;以实现负载均衡和提高系统性能。以下是一些常见的服务器负载均衡算法的详细说明&#xff1a; 轮询&#xff08;Round Robin&#xff09;算法&#xff1a; 轮询算法是最简单且常见的负载均衡算法之…

ES6基础知识四:对象新增了哪些扩展?

一、参数 ES6允许为函数的参数设置默认值 function log(x, y World) {console.log(x, y); }console.log(Hello) // Hello World console.log(Hello, China) // Hello China console.log(Hello, ) // Hello函数的形参是默认声明的&#xff0c;不能使用let或const再次声明 fu…

minitab学习系列(3)--DOE结果分析

系列文章目录 文章目录 系列文章目录前言一、DOE五步法二、分析要点1.ANOVA表的分析2.分析评估回归的总效果3.分析评估各项效应的显著性 三、图像解释1.Pareto图2.正态效应图3.半正态效应图4.残差图5.Box-Cox变换结果图 四、判断模型是否需要改进五、删减模型判断6.主效应图7.等…

大数据技术之Hive2

目录标题 3、Hive 数据类型3.1 基本数据类型&#xff1a;3.2 集合数据类型&#xff1a;3.3 类型转化 4、DDL数据定义4.1 创建数据库4.2 查询数据库4.3 创建表4.4 管理表4.5 外部表4.6 管理表与外部表的相互转换4.7 分区表4.7.1 分区表基本操作4.7.2 分区表注意事项 4.7 修改表4…

C#using关键字的使用方法

这篇日志记录下C#中using关键字的使用方法。 Using的使用大致分别以下三种&#xff1a; 1&#xff1a;using指令&#xff08;命名空间&#xff09; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; …