当前位置: 首页 > news >正文

【vue】监听table水平滚动条切换tab后还原位置

有个需求就是切换tab后,原先的table水平滚动条要还原位置(如下图),先说下思路,大致就是 切出页面时 把滚动距离保存到Storage 中,切回来时在恢复
在这里插入图片描述
直接上代码
首先table ref指定一下ref="jtable"
vue methods中写好两个方法

handleScroll() { //滚动的事件let scrollPosition = this.$refs.jtable.$el.querySelector('.ant-table-body').scrollLeft;localStorage.setItem("PortMore-scrollLeft", scrollPosition);},//定位到原来滚动条的位置restoreScrollPosition() {let scrollX = localStorage.getItem('PortMore-scrollLeft');if (scrollX) {this.$refs.jtable.$el.querySelector('.ant-table-body').scrollLeft = scrollX;}},

注意,如果是只涉及几个页面,可以像我一样直接指定存入localStorage中的key是PortMore-scrollLeft,多个的话可以通过路由路径去拼接,比如localStorage.setItem(this.$route.fullPath+"-scrollLeft", scrollPosition);
接下来就是几个触发事件

watch: {//路由变更的时候恢复保存的滚动位置'$route'(nv, ov) {this.restoreScrollPosition();},},beforeDestroy() {// 页面关闭前触发的逻辑localStorage.removeItem("PortMonitor-scrollLeft");},

如果你的tab页面很简单的话,推荐使用这个方法

beforeRouteLeave(to, from, next) {this.handleScroll();//指定操作要放在离开路由前this.routeThis = this.$route.fullPath;next();},

注意,这时候你会发现beforeDestroy获取不到之前的路由,所以我是这样拼接的

beforeDestroy() {// 页面关闭前触发的逻辑localStorage.removeItem(this.routeThis + "-scrollLeft");},

这个routeThis是定义在上边data里的

data() {return {routeThis: "",};},

但是,如果你的tab页面里又套了两个小tab页面,建议老老实实在小页面mounted里写上以下代码

this.$nextTick(() => {const tableComponent = this.$refs.jtable;if (tableComponent) {const tableContainer = tableComponent.$el.querySelector('.ant-table-body');tableContainer.addEventListener('scroll', this.handleScroll);}})

这个是给table加上一个滚动监听事件

相关文章:

【vue】监听table水平滚动条切换tab后还原位置

有个需求就是切换tab后,原先的table水平滚动条要还原位置(如下图),先说下思路,大致就是 切出页面时 把滚动距离保存到Storage 中,切回来时在恢复 直接上代码 首先table ref指定一下ref"jtable" …...

C#使用PdfSharp生成PDF文件实例详解

许多项目开发中需要生成PDF, 常规办法使用官方提供的Microsoft.Office.Interop.Worddll插件,但是这种方法需要完全安装OFFICE,另外版本不一致还会出现很多错误。一般不推荐使用。 下面介绍几种巧妙的用法,定能事半功倍。 本文使用PDFsharp完成功能。 PDFsharp一款开源的…...

【软件系统架构设计师-案例-1】架构风格

1. 请用200字以内说明系统可靠性的定义及包含的4个子特性,并简要指出提高系统可靠性一般采用哪些技术? (1)可靠性定义:系统在规定的时间或环境条件下,完成规定功能的能力,就是系统无故障运行的…...

神经网络整体架构

文章目录 1.输入层Input2.卷积层Conv3.激活函数层(一)Sigmoid 函数(二)Tanh 函数(三)修正线性单元ReLU(四)Leaky ReLU函数(带泄露的Relu)(五)参数化ReLU 4.池化层POOL5.全连接层FC6.输出层Output 用全连接神经网络处理大尺寸图像具有三个明显的缺点: ①将图像展开为…...

山西农业大学20241010

02-JAVASCRIPT 一.JS基础语法1. 数据类型转换1.1 隐式转换1.2 强制转换 2. 运算符 二.JS语句1. 条件语句2. 循环语句 三.函数(方法)1. 声明函数的第一种方法2. 声明函数的第二种方法3. 声明函数的第三种方法 四.对象1. 对象的创建 -- 字面量2. 访问对象的属性3. 内置构造函数以…...

小北的技术博客:探索华为昇腾CANN训练营与AI技术创新——Ascend C算子开发能力认证考试(中级)

前言 哈喽哈喽,这里是zyll~,北浊.(大家可以亲切的呼唤我叫小北)智慧龙阁的创始人,一个在大数据和全站领域不断深耕的技术创作者。今天,我想和大家分享一些关于华为昇腾CANN训练营以及AI技术创新的最新资讯和实践经验~(初级证书还没拿到的小伙伴,可以先参考小北的这篇技术…...

Docker极速入门一文通

文章目录 Docker极速入门一文通Docker命令搜索镜像docker search拉取镜像|下载镜像docker pull查看镜像docker images删除镜像docker rmi运行容器docker run查看容器 docker ps删除容器 docker rm后台启动容器 docker run -d进入容器 docker exec拷贝文件到容器 docker cp拷贝容…...

Unity网络开发基础 —— 实践小项目

概述 接Unity网络开发基础 导入基础知识中的代码 需求分析 手动写Handler类 手动书写消息池 using GamePlayer; using System; using System.Collections; using System.Collections.Generic; using UnityEngine;/// <summary> /// 消息池中 主要是用于 注册 ID和消息类…...

四、Spring Boot集成Spring Security之认证流程

Spring Boot集成Spring Security之认证流程 一、概要说明二、基于内存的用户名密码1、默认用户名密码2、自定义用户名密码3、为方便测试添加测试接口TestController 三、登录登出重要概念介绍四、登录业务逻辑1、登录业务相关过滤器2、访问业务请求处理流程①、访问业务请求地址…...

Chromium 中chrome.bookmarks扩展接口c++实现

一、扩展接口定义 chrome.bookmarks 使用 chrome.bookmarks API 创建、整理以及以其他方式操纵书签。另请参阅覆盖网页&#xff08;可用于创建自定义“书签管理器”页面&#xff09;。 更多参考chrome.bookmarks | API | Chrome for Developers (google.cn) 扩展可以请从…...

编程思想:编程范式:响应式编程

文章目录 概述实现的设计模式举例总结概述 响应 响应一般指对于事件的响应,事件包括数据变化或其他事件 响应流程包括事件的发生,事件的传递,和事件的最终处理 事件在起点处发生,开始传递过程 传递过程,包括对事件的一系列处理,如事件封装的数据的类型转化,数据集合…...

Leetcode 颜色分类

这个算法采用了荷兰国旗问题&#xff08;Dutch National Flag Problem&#xff09;的解法思想&#xff0c;用三个指针将数组中的元素分为三个区域&#xff0c;并且对这些区域进行动态调整&#xff0c;达到排序的目的。 算法思想&#xff1a; 三个指针&#xff1a; low 指针表示…...

ssh连接阿里云长连接

如何让ssh保持连接&#xff1f; 有时候用ssh连接阿里云莫名奇妙断开了。怎么样才能保持连接呢&#xff1f; 修改系统的链接参数: &#xff08;1&#xff09;修改/etc/ssh/sshd_config文件&#xff0c;找到 ClientAliveInterval 0和ClientAliveCountMax 3并将注释符号&#x…...

栈的C实现

栈的C实现 栈简介栈的C实现1.栈结构体2.初始化栈3.栈的基本操作 栈简介 栈&#xff08;Stack&#xff09;是一种后进先出的数据结构&#xff0c;类似于一个垂直的容器。 栈的特点是后进先出&#xff0c;即最后入栈的元素最先出栈。栈可以用来解决递归问题、实现函数调用、以及…...

【MySQL】入门篇—数据库基础:关系数据库概念

一、背景与重要性 在当今数字化时代&#xff0c;数据的管理和存储变得尤为重要。无论是企业的客户信息、产品数据&#xff0c;还是社交媒体上的用户互动&#xff0c;数据都是推动业务和决策的核心。 关系数据库管理系统&#xff08;RDBMS&#xff09;是一种广泛使用的数据管理…...

不到千元的自动猫砂盆是智商税吗?这四大选购技巧不看就亏大了

虽然现在的人都说&#xff0c;猫砂盆等上班一天回来再清理也没有任何关系&#xff0c;但实际上在这一天里&#xff0c;猫咪的粪便已经在猫砂盆里滋生了很多无法察觉的细菌&#xff0c;久而久之就会影响猫咪的健康&#xff0c;导致尿闭&#xff0c;放了一天的便便臭味也让人无法…...

【图论】(二)图论基础与路径问题

图论基础与路径问题 图的构造邻接矩阵邻接表 所有可达路径邻接矩阵存储邻接表存储 字符串接龙有向图的完全可达性 图的构造 这里仅对图论路径问题中图的构造做整理总结归纳&#xff0c;具体详细相关概念请参考代码随想录上的整理总结&#xff1a; 图论理论基础深度优先搜索理…...

Git常用命令(持续更新中)

mkdir one 在当前目录下创建一个名为one的文件夹 cd one 进入one 文件夹 git init 初始化git 仓库 touch README.md 创建一个后缀为.md的新文件README.md git add README.md 将README.md添加到git暂存区 git add * . * 将所有文件添加到暂存区 git add "E:/t…...

什么是PLM系统?PLM系统对制造业起到哪些作用?三品PLM系统对汽车制造业意义

在当今竞争激烈的制造业环境中&#xff0c;企业面临着来自市场、技术、客户需求等多方面的挑战。为了应对这些挑战&#xff0c;许多制造企业纷纷引入产品生命周期管理PLM系统&#xff0c;以实现更高效、更灵活的产品全生命周期管理。PLM系统以其独特的优势&#xff0c;在优化产…...

Pr 视频效果:元数据和时间码刻录

视频效果/视频/元数据和时间码刻录 Video/Metadata & Timecode Burn-in 元数据和时间码刻录 Metadata & Timecode Burn-in效果是一种在视频画面上叠加显示剪辑元数据或时间码的工具。它允许在导出视频时&#xff0c;将需用的元数据信息直接刻录在画面上&#xff0c;方便…...

【ComfyUI】Qwen-Image-Edit-F2P 环境配置全攻略:Anaconda创建独立Python环境

ComfyUI Qwen-Image-Edit-F2P 环境配置全攻略&#xff1a;Anaconda创建独立Python环境 你是不是也遇到过这种情况&#xff1a;好不容易找到一个好用的AI图像编辑模型&#xff0c;比如Qwen-Image-Edit-F2P&#xff0c;兴冲冲地准备在ComfyUI里跑起来&#xff0c;结果第一步安装…...

腾讯云+Astrbot个人AI部署,接入QQ机器人

1、腾讯云创建云服务器 之所以选择腾讯云是因为可以领一个月免费服务器 地址&#xff1a;https://cloud.tencent.com/ 服务器配置情况&#xff1a; 这里我获取的是轻量应用服务器&#xff08;Lighthouse&#xff09;&#xff0c;适合网站搭建、开发测试等多种场景。以下是详细…...

从0到1手把手教你搭建AI Agent,打造多智能体协同系统

本文完整展示如何从 0 到 1 手搓一个 AI Agent 的搭建过程。在具体动手实操的过程中&#xff0c;重点为大家展示从需求分析到如何搭建。需求分析中包含如何识别 AI 提效场景和、梳理提效场景流程。如何搭建中包含工作流创建、智能体创建、智能体发布。接下来&#xff0c;将结合…...

【QT】Layout布局间隙优化全攻略(参数调整与实战技巧)

1. 为什么你的QT界面总有"迷之缝隙"&#xff1f; 每次用QT做界面开发时&#xff0c;最让我抓狂的就是那些莫名其妙出现的空白间隙。明明已经按照设计稿精确设置了控件尺寸&#xff0c;但运行起来总会出现几个像素的偏差。后来我发现&#xff0c;这些间隙主要来自三个…...

HunyuanVideo-Foley命令行教程:infer.py参数详解与批量音效生成脚本编写

HunyuanVideo-Foley命令行教程&#xff1a;infer.py参数详解与批量音效生成脚本编写 1. 环境准备与快速部署 在开始使用HunyuanVideo-Foley进行音效生成前&#xff0c;我们需要确保环境已经正确部署。本教程基于RTX 4090D 24GB显存显卡和CUDA 12.4优化环境。 1.1 镜像启动与…...

NaViL-9B部署案例:中小企业用双24GB显卡替代A100实现降本增效

NaViL-9B部署案例&#xff1a;中小企业用双24GB显卡替代A100实现降本增效 1. 项目背景与价值 在AI大模型应用日益普及的今天&#xff0c;中小企业面临着高昂的硬件投入成本。传统部署方案通常需要A100等高端显卡&#xff0c;单卡价格动辄数万元&#xff0c;让许多企业望而却步…...

一篇搞定2026年律所管理系统选购,避坑技巧+优质品牌全解析

据智研咨询2026年发布的《中国律所管理软件行业发展报告》显示&#xff0c;国内律所对管理系统的需求年增长率达28%&#xff0c;但近70%的律所表示选型后存在功能冗余、操作复杂、适配性差等问题&#xff0c;不仅未能提升效率&#xff0c;反而增加了办公成本。作为深耕律所管理…...

SEO_新手必看的SEO优化入门教程与核心方法(361 )

<h3 id"seoseo">SEO:新手必看的SEO优化入门教程与核心方法</h3> <p>在互联网时代&#xff0c;拥有一个成功的网站不仅仅是有好的设计和内容&#xff0c;还需要通过SEO&#xff08;搜索引擎优化&#xff09;来提升网站的可见性和流量。对于新手来说…...

Qwen3-0.6B-FP8代理能力展示:调用计算器、查天气、解析PDF的Chainlit实录

Qwen3-0.6B-FP8代理能力展示&#xff1a;调用计算器、查天气、解析PDF的Chainlit实录 1. 引言&#xff1a;当小模型遇上大智慧 你可能听过很多关于大语言模型的讨论&#xff0c;动辄几十亿、上百亿参数&#xff0c;感觉它们无所不能。但今天我想和你聊聊一个不太一样的模型—…...

VRM-Addon-for-Blender:虚拟角色创作全流程指南

VRM-Addon-for-Blender&#xff1a;虚拟角色创作全流程指南 【免费下载链接】VRM-Addon-for-Blender VRM Importer, Exporter and Utilities for Blender 2.93 or later 项目地址: https://gitcode.com/gh_mirrors/vr/VRM-Addon-for-Blender VRM-Addon-for-Blender是一款…...