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

news2024/10/6 8:21:34

跳转的两种写法:

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

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

<el-table
          size="mini"
          :data="tableData"
          border
          style="width: 100%"
          :max-height="maxHeight"
        >
          <el-table-column prop="stationName" label="站点名称">
            <template slot-scope="scope">
              <keep-alive>
                <span
                  class="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: ''
      }
    }]
  },

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

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

相关文章

【功能安全】:02-ASIL理解

ASIL理解 ASIL解释参考文档设计准则以"软件层开发"分析为例软件单元级别的结构覆盖度量要求学习过程浏览过的文章记录ASIL解释 Automotive Safety Integrity Rating汽车安全完整性等级,按”V“模型展开分析,它是需要贯穿整个产品设计的过程;且每层级都有它的ASIL…

unity界面上Global 与Local xyz- right up forward

gloabal 如果要沿这个方向移动就比较困难 local下就不一样了

Web_单一视频文件mp4转换为m3u分段ts文件实现边下边播

一、下载ffmpeg: Builds - CODEX FFMPEG @ gyan.dev 二、转换视频文件: 先解压缩,会看到如下结构: 进入bin目录,把需要转换的视频文件复制过来,同时新建一个文件夹用来存放转换后的文件,然后按住Shift键同时单击鼠标右键,选择打开Powershell窗口: 输入以下命令(根据…

艾昆纬携手亚马逊云科技赋能生物医药企业,加速武田数字化转型

IQVIA艾昆纬是全球以及中国医疗健康服务领域的领导者&#xff0c;利用其数据及分析&#xff0c;前沿数字化技术和医疗领域的专业知识&#xff0c;智能连接医疗生态的各个环节。过去几年&#xff0c;IQVIA艾昆纬所服务的生物医药行业客户武田中国也迎来了数字化转型的高潮。 武田…

大家一起讨论java将富文本内容html转为图片base64

转化为base64的好处不用存图片删除图片&#xff0c;查询富文本内容直接转化在页面显示&#xff0c;但是好模糊&#xff01; 有兴趣的友友们可以一起探讨怎么解决这个问题&#xff01;&#xff01;&#xff01;&#xff01; 先看效果 直接分享代码 pom添加 <!-- Html2Im…

PCL中的FPS(最远点采样)源码

原理&#xff1a; 1.首先&#xff0c;对于三维点云数据&#xff0c;我们一般采取欧式距离度量点之间距离&#xff0c;即空间中两点直线距离。 2.在对第一个点采样时&#xff0c;理论上我们可以随机从数据中选取一个点。另一种规范的做法是&#xff1a;求整个数据点(点云)的重心…

Python2021年12月Python二级 -- 编程题解析

题目一: 日期计算器 设计一款日期计算程序&#xff0c;能否实现下面的功能 (1)要求用户分别输入年、月、日 (分三次输入) ; (2)程序自动会根据输入的年月日计算出这一天是这一年的第几天: (3)输出格式为:这是****年的第**天 请输入某年某月某日&#xff0c;通过编程判断这一天是…

2023-8-31 spfa判断负环

题目链接&#xff1a;spfa判断负环 #include <iostream> #include <cstring> #include <algorithm> #include <queue>using namespace std;const int N 100010;int n, m; int h[N], e[N], w[N], ne[N], idx;int dist[N], cnt[N]; int st[N];void ad…

2023年航空物流行业研究报告

第一章 行业概况 1.1 定义及分类 航空物流行业是一个涉及使用飞机进行货物运输和配送的行业。这个行业包括但不限于航空货运公司&#xff0c;航空公司的货运部门&#xff0c;机场&#xff0c;货运代理&#xff0c;以及提供与航空货运相关的一系列服务的公司&#xff0c;如包装…

【边双】CF Edu10 E

Problem - E - Codeforces 题意&#xff1a; 思路&#xff1a; st 到 ed存在多条路径 注意到在同一个边双连通分量中&#xff0c;如果存在一条边的边权是1&#xff0c;那么这个边双连通分量中所有点对的路径中都存在一条边的边权是1&#xff0c;因此我们考虑缩点&#xff0c…

java相关异常大全,持续更新~~~

[Java] 异常 1. NullPointerException NullPointerException是Java中最常见的异常之一&#xff0c;通常在试图访问或操作一个null对象时引发。 示例代码&#xff1a; String str null; int length str.length();解决方法&#xff1a; 在访问或操作对象之前&#xff0c;检…

【C++】使用哈希表模拟实现STL中的unordered_set和unordered_map

文章目录 前言一.哈希表模板改造封装unordered_set和unordered_map1. 哈希表结构修改2. unordered_set和unordered_map增加KeyOfT仿函数3. insert封装及测试4. 哈希表迭代器的实现5. begin和end6. unordered_set和unordered_map的迭代器封装7. unordered_map的[]重载8. 补充完善…

如何解决 Out Of Memory 的问题

背景 在用 Excel Importer 导入数据&#xff0c;当数据量超过 1w 行&#xff0c;经常会出现 OutOfMemory 的错误。&#xff08;用 Excel Exporter 导出数据时&#xff0c;也会有类似问题&#xff09;。 通常的表现症状如下&#xff0c;即在导入成功若干行之后&#xff0c;爆出…

以人工智能手段为依托的:智慧导诊系统源码,提供智能分诊、问病信息等服务

智慧医院3D人体导诊系统源码 开发语言&#xff1a;java 开发工具&#xff1a;IDEA 前端框架&#xff1a;Uniapp 后端框架&#xff1a;springboot 数 据 库&#xff1a;mysql 移 动 端&#xff1a;微信小程序、H5 “智慧导诊”以人工智能手段为依托&#xff0c;为…

9月份抱团学习❗开启报名通道

365天深度学习训练营 大家好&#xff0c;我是K同学啊&#xff01; 一个深度学习领域博主&#xff0c;CSDN的博客专家、有八万粉丝&#xff0c;和鲸特邀导师&#xff0c;《深度学习100例》的作者&#xff0c;一个收到中科院等诸多名校、名企offer的自由摄影爱好者 。 因为经常…

OpenCV

文章目录 OpenCV学习报告读取图片和网络摄像头1.1 图片读取1.2 视频读取1.1.1 读取视频文件1.1.2读取网络摄像头 OpenCV基础功能调整、裁剪图像3.1 调整图像大小3.2 裁剪图像 图像上绘制形状和文本4.1 图像上绘制形状4.2图像上写文字 透视变换图像拼接颜色检测轮廓检测人脸检测…

DP485 具有±15KV ESD 保护,500kbps 通迅速率,256 节点 RS485/RS422 收发器

产品概述&#xff1a; DP485E 是一款 5V 供电、半双工、低功耗、低摆率&#xff0c;完全满足 TIA/EIA-485 标准要求的 RS-485收发器。DP485E包括一个驱动器和一个接收器&#xff0c;两者均可独立使能与关闭。当两者均禁用时&#xff0c;驱动器与接收器均输出高阻态。DP485E具有…

Nacos源码启动 java.net.UnknownHostException: jmenv.tbsite.net

一 概述 Nacos本地源码环境提示&#xff1a; Unable to start web server; nested exception is org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat 二 解决方法&#xff1a; 启动增加如下配置&#xff1a; -Dnacos.standalonetrue …

API类型和集成规范指南

在我们的常见应用中&#xff0c;往往包含着大量服务于各种数据交换的API类型、以及各种常见的API架构与协议。下面&#xff0c;我将从集成的角度和您讨论&#xff0c;在准备将多个服务相互集成时&#xff0c;使用不同类型、架构和协议的API意味着什么?我们可以使用哪些工具&am…

日本排核污水:有人2天赚了800万

来谈1个非常夸张的事&#xff0c;有人2天用它搞了800多万&#xff0c;这一波完全震惊我和小伙伴&#xff0c;哪位兄弟老哥有货和资源的抓紧去搞&#xff0c;这波红利能持续好一段时间。 24号中午发生了件大事件&#xff0c;让所有人都气愤&#xff01;流量巨大&#xff0c;不管…