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

el-table中点击跳转到详情页的两种方法

跳转的两种写法:

1.使用keep-alive使组件缓存,防止刷新时参数丢失

keep-alive 组件用于缓存和保持组件的状态,而不是路由参数。它可以在组件切换时保留组件的状态,从而避免重新渲染和加载数据。 keep-alive 主要用于提高页面性能和用户体验,而不涉及路由参数的传递和保留。这里使用 <keep-alive> 组件是为了在刷新页面时保持之前传递的参数,确保页面能够正确地显示之前的状态, 其实使用params更合适

<el-tablesize="mini":data="tableData"borderstyle="width: 100%":max-height="maxHeight"><el-table-column prop="stationName" label="站点名称"><template slot-scope="scope"><keep-alive><spanclass="goDetail"v-hasPermi="['station:detail']"@click="go2Detail(scope.row)">{{ scope.row.stationName }}</span></keep-alive></template></el-table-column>
<el-table>
methods: {
// 跳转到详情页面go2Detail(row) {this.$router.push({path: "/site/siteDetail",query: {row}});},}

2.使用router-link , 使用 <router-link> 进行页面跳转时,刷新页面不会丢失携带的参数。这是因为 <router-link> 在进行路由导航时,会将参数作为路由的一部分,并在刷新页面时将这些参数保留下来。

<el-table-column label="标准名称" align="center" :show-overflow-tooltip="false"><template slot-scope="scope"><router-link :to="'/water/standard/limit/' + scope.row.id" class="link-type"><span>{{ scope.row.standardName }}</span></router-link></template>
</el-table-column>

 需要在router/index.js中配置路由

  {path: '/water',component: Layout,hidden: true,children: [{path: 'standard/limit/:standardId',component: (resolve) => require(['@/views/water/standard/limit'], resolve),name: 'Limit',meta: {title: '标准详情',icon: ''}}]},

相关文章:

el-table中点击跳转到详情页的两种方法

跳转的两种写法: 1.使用keep-alive使组件缓存,防止刷新时参数丢失 keep-alive 组件用于缓存和保持组件的状态&#xff0c;而不是路由参数。它可以在组件切换时保留组件的状态&#xff0c;从而避免重新渲染和加载数据。 keep-alive 主要用于提高页面性能和用户体验&#xff0c;而…...

RT-DETR个人整理向理解

一、前言 在开始介绍RT-DETR这个网络之前&#xff0c;我们首先需要先了解DETR这个系列的网络与我们常提及的anchor-base以及anchor-free存在着何种差异。 首先我们先简单讨论一下anchor-base以及anchor-free两者的差异与共性&#xff1a; 1、两者差异&#xff1a;顾名思义&…...

易点易动库存管理系统与ERP系统打通,帮助企业实现低值易耗品管理

现今,企业管理日趋复杂,无论是核心经营还是辅助环节,都需要依靠信息化手段来提升效率。而低值易耗品作为企业日常运营中的必需品,其管理也面临诸多挑战。传统做法效率低下,容易出错。如何通过信息化手段实现低值易耗品的高效管理,成为许多企业必顾及的一个课题。 易点易动作为…...

【笔试强训选择题】Day34.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&#xff…...

“现代”“修饰”卷积神经网络,何谓现代

一、“现代” vs “传统” 现代卷积神经网络&#xff08;CNNs&#xff09;与传统卷积神经网络之间存在一些关键区别。这些区别主要涉及网络的深度、结构、训练技巧和应用领域等方面。以下是现代CNNs与传统CNNs之间的一些区别&#xff1a; 深度&#xff1a; 传统CNNs&#xff1…...

XHTML基础知识了解

XHTML是一种严格符合XML规范的标记语言&#xff0c;它的基本语法和HTML类似&#xff0c;但是更加严谨和规范。XHTML的代码结构非常清晰&#xff0c;方便浏览器和搜索引擎解析。下面是一些XHTML的基础知识和代码示例&#xff1a; 声明文档类型&#xff08;DTD&#xff09; 在X…...

USB Server集中管控加密狗,浙江省电力设计院正在用

近日&#xff0c;软件加密狗的分散管理和易丢失性&#xff0c;给拥有大量加密狗的浙江省电力设计院带来了一系列的问题。好在浙江省电力设计院带及时使用了朝天椒USB Server方案&#xff0c;实现了加密狗的集中安全管控&#xff0c;避免了加密狗因为管理不善和遗失可能带来的巨…...

rust换源

在$HOME/.cargo/目录下建一个config文件。windows默认是C:\Users\user_name\.cargo。 config文件输入&#xff1a; [source.crates-io] registry "https://github.com/rust-lang/crates.io-index" # 使用 replace-with指明默认源更换为ustc源 replace-with ustc#…...

常见关系型数据库SQL增删改查语句

常见关系型数据库SQL增删改查语句&#xff1a; 创建表&#xff08;Create Table&#xff09;&#xff1a; CREATE TABLE employees (id INT PRIMARY KEY,name VARCHAR(50),age INT,department VARCHAR(50) ); 插入数据&#xff08;Insert Into&#xff09;&#xff1a; INSERT …...

OpenCV(二十七):图像距离变换

1.像素间距离 2.距离变换函数distanceTransform() void cv::distanceTransform ( InputArray src, OutputArray dst, int distanceType, int maskSize, int dstType CV_32F ) src:输入图像&#xff0c;数据类型为CV8U的单通道图像dst:输出图像&#xff0c;与输入图像…...

服务器就是一台电脑吗?服务器的功能和作用

服务器不仅仅是一台普通的电脑&#xff0c;它在功能和作用上有着显著的区别。下面是关于服务器的功能和作用的简要说明&#xff1a; 存储和共享数据&#xff1a;服务器可以用作数据存储和共享的中心。它们通常配备大容量的硬盘或固态硬盘&#xff0c;用于存储文件、数据库和其他…...

vue3实现塔罗牌翻牌

vue3实现塔罗牌翻牌 前言一、操作步骤1.布局2.操作3.样式 总结 前言 最近重刷诡秘之主&#xff0c;感觉里面的塔罗牌挺有意思&#xff0c;于是做了一个简单的塔罗牌翻牌动画&#xff08;vue3vitets&#xff09; 一、操作步骤 1.布局 首先我们定义一个整体的塔罗牌盒子&…...

分布式搜索引擎

1 DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;Domain Specific Language&#xff09;来定义查询。常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数据&#xff0c;一…...

【2023最新版】腾讯云CODING平台使用教程(Pycharm/命令:本地项目推送到CODING)

目录 一、CODING简介 网址 二、CODING使用 1. 创建项目 2. 创建代码仓库 三、PyCharm&#xff1a;本地项目推送到CODING 1. 管理远程 2. 提交 3. 推送 4. 结果 四、使用命令推送 1. 打开终端 2. 初始化 Git 仓库 3. 添加远程仓库 4. 添加文件到暂存区 5. 提交更…...

IDEA Properties 文件亂碼怎麼解決

1.FIle->Setting->Editor->File Encodings 修改Properties FIles 編碼顯示格式&#xff1a;UTF-8...

uniapp微信小程序用户隐私保护

使用wx.requirePrivacyAuthorize实现微信小程序用户隐私保护。 一、前言 微信小程序官方出了一个公告《关于小程序隐私保护指引设置的公告》。不处理的话&#xff0c;会导致很多授权无法使用&#xff0c;比如头像昵称、获取手机号、位置、访问相册、上传图片视频、访问剪切板…...

虚幻引擎4中关于设置关于体坐标系下的物体速度的相关问题

虚幻引擎4中关于设置关于体坐标系下的物体速度的相关问题 文章目录 虚幻引擎4中关于设置关于体坐标系下的物体速度的相关问题前言全局坐标系转体坐标系速度设置X轴方向的体坐标系速度设置Y轴方向的体坐标系速度XY轴体坐标系速度整合 Z轴速度的进一步设置解决办法 小结 前言 利…...

16 | Spark SQL 的 UDF(用户自定义函数)

UDF(用户自定义函数):Spark SQL 允许用户定义自定义函数,以便在 SQL 查询或 DataFrame 操作中使用。这些 UDF 可以扩展 Spark SQL 的功能,使用户能够执行更复杂的数据操作。 示例: // 注册UDF spark.udf.register("calculateDiscount", (price: Double, disc…...

蓝桥杯官网填空题(土地测量)

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 造成高房价的原因有许多&#xff0c;比如土地出让价格。既然地价高&#xff0c;土地的面积必须仔细计算。遗憾的是&#xff0c;有些地块的形状不规则&#xff0c;比…...

【Java项目实战】牛客网论坛项目1 - Spring入门与初识SpringMVC

目录 Spring 入门SpringInitializrApplicationContextAwareControllerDAODAO 名称索引ServiceConfig自动装配 初识 SpringMVCHttp 请求GETPOSTHTML 渲染响应 JSON 数据 Spring 入门 SpringInitializr IDEA 专业版自带的功能&#xff0c;也可以直接搜索对应网站&#xff0c;通…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...