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

目前的页面样式为:

 代码是:

  <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.mfbz.cn/a/44964.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【NLP】图解变压器(transformer)

一、说明 在这篇文章中&#xff0c;我们将看看 The Transformer——一个利用注意力来提高这些模型训练速度的模型。转换器在特定任务中优于谷歌神经机器翻译模型。然而&#xff0c;最大的好处来自变压器如何适应并行化。事实上&#xff0c;谷歌云建议使用The Transformer作为参…

【Linux后端服务器开发】协议定制(序列化与反序列化)

目录 一、应用层协议概述 二、序列化与反序列化 Protocal.h头文件 Server.h头文件 Client.h头文件 server.cpp源文件 client.cpp源文件 一、应用层协议概述 什么是应用层&#xff1f;我们通过编写程序解决一个个实际问题、满足我们日常需求的网络程序&#xff0c;都是应…

0基础学习VR全景平台篇 第69篇:VR直播-如何设置广告

直播间可以插入轮播广告&#xff0c;并且支持外链跳转&#xff0c;能够有效地提升VR直播活动的转化率。 1、点击&#xff0c;添加广告 2、广告图展现形式分为两种&#xff1a;普通广告和全屏广告&#xff0c;普通广告在非全屏播放的直播间显示&#xff0c;全屏广告在全屏播放的…

【Visual Studio】VS调用tensorflow C++API的配置(无需编译)

1. 首先下载并安装visual studio Visual Studio 2015 安装教程&#xff08;附安装包&#xff09;&#xff0c;按照博客中顺序来就可以 如果在安装过程中提示安装包损失或毁坏&#xff0c;参考VS2015安装过程中安装包丢失或损坏解决办法 卡在哪个搜索文件上就找到哪个文件再继…

【100天精通python】Day15:python 第三方模块和包,模块如何以主程序形式执行

目录 1 常用的第三方模块 2. 第三方模块的安装和使用 2.1 安装第三方模块&#xff1a; 2.2 导入第三方模块&#xff1a; 2.3 使用第三方模块&#xff1a; 3 模块以主程序形式执行 4 python 中的包 4.1 python程序的包结构 4.2 创建包 4.3 python中包的导入和使用 5 …

lama cleaner

这里写自定义目录标题 安装参数包含的额外plugins 安装 conda create --name lamacleaner python3.10 pip install -r requirements.txt pip install gfpgan pip install realesrgan pip install rembg pip install .如果安装本package报错&#xff0c;可以尝试改&#xff1…

【安全】web中的常见编码浅析浏览器解析机制

目录 常见编码 一、ASCII码 二、URL编码 三、Unicode编码 四、HTML实体编码 结合编码理解浏览器解析机制 常见编码 一、ASCII码 ASCII (American Standard Code for Information Interchange&#xff0c;美国信息交换标准代码&#xff09; 计算机内部&#xff0…

Ceph简介和特性

Ceph是一个多版本存储系统&#xff0c;它把每一个待管理的数据流(例如一个文件) 切分为一到多个固定大小的对象数据&#xff0c;并以其为原子单元完成数据存取。 对象数据的底层存储服务是由多个主机 (host) 组成的存储集群&#xff0c;该集群也被称之为 RADOS (ReliableAutoma…

测试覆盖率 JVM 字节码测试运用 - 远程调试、测试覆盖、影子数据库

目录 前言&#xff1a; 简介 基础使用方式介绍 工具特性 前言&#xff1a; 在软件开发中&#xff0c;测试覆盖率是一个非常重要的指标&#xff0c;它表示代码中所有的测试用例是否都已经被覆盖到。JVM 字节码测试是一种比较新的测试方法&#xff0c;它可以对 JVM 字节码进…

php开发实战分析(10):城市区县联动筛选

php开发实战分析系列目录 php开发实战分析(1)&#xff1a;mysql操作字段&#xff08;添加、删除、修改&#xff0c;多数据表中新增多个字段&#xff09;php开发实战分析(2)&#xff1a;cookie的动态使用&#xff08;设置、获取、删除、猜你喜欢原理、购物车调用&#xff09;ph…

DB-GPT:强强联合Langchain-Vicuna的应用实战开源项目,彻底改变与数据库的交互方式

今天看到 蚂蚁科技 Magic 开源的DB-GPT项目&#xff0c;觉得创意很好&#xff0c;集成了当前LLM的主流技术&#xff0c;主要如下 Langchain&#xff1a; 构建在LLM之上的应用开发框架HuggingFace: 模型标准&#xff0c;提供大模型管理功能Vicuna: 一个令GPT-4惊艳的开源聊天机…

❓“如何创业?互联网创业又该如何入手?

&#x1f31f;5大创业建议&#xff0c;让你轻松入门&#xff01; 作为一名互联网创业者&#xff0c;我想分享一下我的创业经验。下面是我的五个建议&#xff0c;希望对你有所帮助&#xff01; &#x1f31f;了解市场需求 在创业之前&#xff0c;了解市场需求非常重要。你需要研…

Docker基本概念+命令

Docker基本概念命令 一、Docker是什么&#xff1f;二、为什么Docker技术受欢迎三、Docker核心概念四、Docker安装五、Docker镜像操作1.搜索镜像2.获取镜像3.镜像加速下载4.查看镜像信息5.查看下载的镜像文件信息6.查看下载到本地的所有镜像7.获取镜像的详细信息8.修改镜像标签9…

STM32MP157驱动开发——按键驱动(异步通知)

文章目录 “异步通知 ”机制&#xff1a;信号的宏定义&#xff1a;信号注册 APP执行过程驱动编程做的事应用编程做的事异步通知方式的按键驱动程序(stm32mp157)button_test.cgpio_key_drv.cMakefile修改设备树文件编译测试 “异步通知 ”机制&#xff1a; 信号的宏定义&#x…

阿里云容器镜像仓库(ACR)的创建和使用

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

【Flume 01】Flume简介、部署、组件

1 Flume简介 Flume是一个高可用、高可靠、分布式的海量日志采集、聚合和传输的系统 主要特性&#xff1a; 它有一个简单、灵活的基于流的数据流结构&#xff08;使用Event封装&#xff09;具有负载均衡机制和故障转移机制一个简单可扩展的数据模型(Source、Channel、Sink) Sou…

若依vue 多table前端HTML页面导出一张Excel表

前言 导入依赖&#xff0c;具体前端vue配置就不介绍了&#xff0c;直接晒具体细节代码 实现 需要在多table外加div&#xff0c;其他都是基本操作js代码 import FileSaver from file-saver import * as XLSX from "xlsx";const htmlToExcel {getExcelNew(classNam…

Windows Server 2019 中文版、英文版下载 (updated Jul 2023)

Windows Server 2019 中文版、英文版下载 (updated Jul 2023) Windows Server 2019 Version 1809&#xff0c;2023 年 7 月更新 请访问原文链接&#xff1a;https://sysin.org/blog/windows-server-2019/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者…

软件测试测试分类(重点)

目录 按照测试对象划分&#xff08;了解&#xff09; ①界面测试 ②可靠性测试&#xff08;可用性&#xff09; ③容错性测试 容错性和可靠性之间的区别 ④文档测试 ⑤兼容性测试 ⑥易用性测试 ⑦安装、卸载测试 ⑧安全测试 ⑨性能测试 内存泄露测试 按照是否查看…

HDFS基本操作命令

这里写目录标题 HDFS Shell CLI客户端说明常用命令hadoop fs -mkdir [-p] <path>hadoop fs -ls [-h] [-R] [<path>...]上传文件到指定目录下方法一:hadoop fs -put [-f] [-p] <localsrc>.....<dst>方法二&#xff1a;hadoop fs -moveFromLocal <loc…