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: ''}}]},

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

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

相关文章

vue2项目中el-input单独使用max和maxlength不生效问题

vue2项目中el-input单独使用max和maxlength不生效问题 今天在vue2的项目中使用element中的<el-input>组件&#xff0c;因为没有使用form所以max和maxlength属性没有生效&#xff0c;下面是解决办法 <el-input placeholder"请输入" v-model"holeDat…

django-发送邮件

一、业务场景 业务警告 邮箱验证 密码找回 二、邮件相关协议 1.SMYTP&#xff08;简答邮件传输协议 25端口&#xff09; 属于“推送”协议 负责发送 2.IMAP&#xff08;交互式邮件访问协议&#xff0c;应用层协议&#xff0c;143端口&#xff09; 用于从本地邮件客户端…

Redis知识点整理

第一部分&#xff1a;Redis基础知识点 1、数据类型 5种常用基础类型&#xff1a;string,hash,list,set,zset – 字符串&#xff0c;Hash表&#xff0c;List顺序集合&#xff0c;Set无序集合&#xff0c;ZSet有序集合3中特殊类型&#xff1a;bitmap-字节地图, hyperloglog-统计…

ITMS介绍

ITMS&#xff08;Integrated Terminal Management System&#xff09;&#xff0c;终端综合管理系统。 主要用于家庭网关的设备注册&#xff0c;初始化自动配置&#xff0c;软件版本升级&#xff0c;远程故障诊断修复和设备监控等。它通过北向连接服开系统用于接收业务工单&am…

Java----Sentinel持久化规则启动

java -jar -Dnacos.add8848 你的sentinel源码修改包.jar 前期准备&#xff1a; 1.引入依赖 在order-service中引入sentinel监听nacos的依赖&#xff1a; <dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-datasource-nacos</…

Mybatis中 list.size() = 1 但显示 All elements are null

一、Bug展示 二、原因分析 2.1.情形一&#xff1a;Mybatis的XML中返回类型映射错误 <select id"selectByDesc" parameterType"com.task.bean.OrderInfo"resultType"com.task.bean.OrderInfo">select MER_ID,SETTLE_DATE,ICE_NAME,ORDER_S…

element ui-Pagination

页面分为两个表格&#xff0c;当两边的表格数据量大时&#xff0c;分页样式就会受到影响&#xff0c;可以将跳转按钮的个数减少 页面分页代码如下 页面效果

使用ELK收集解析nginx日志和kibana可视化仪表盘

文章目录 ELK生产环境配置filebeat 配置logstash 配置 kibana仪表盘配置配置nginx转发ES和kibanaELK设置账号和密码 ELK生产环境配置 ELK收集nginx日志有多种方案&#xff0c;一般比较常见的做法是在生产环境服务器搭建filebeat 收集nginx的文件日志并写入到队列&#xff08;k…

掌握AI助手的魔法工具:解密Prompt(提示)在AIGC时代的应用「中篇」

文章目录 掌握AI助手的魔法工具&#xff1a;解密Prompt&#xff08;提示&#xff09;在AIGC时代的应用「中篇」一、指南原则1: 使用明确和具体的指令原则2: 给模型思考的时间 二、迭代三、总结与提取四、局限与改善五、总结 掌握AI助手的魔法工具&#xff1a;解密Prompt&#x…

Windows下将nginx等可执行文件添加为服务

Windows下将nginx等可执行文件添加为服务 为什么将可执行文件添加为服务&#xff1f;将可执行文件添加为服务的步骤步骤 1&#xff1a;下载和安装 Nginx步骤 2&#xff1a;添加为服务方法一&#xff1a;使用 Windows 自带的 sc 命令方法二&#xff1a;使用 NSSM&#xff08;Non…

uniapp中使用原生canvas标签绘制视频帧来模拟拍照,拍照后将图绘制在另外一个canvas上编辑画图,这样反复操作

uniapp中使用原生canvas标签绘制视频帧来模拟拍照&#xff0c;拍照后将图绘制在另外一个canvas上编辑画图&#xff0c;这样反复操作会导致ios系统上白屏&#xff0c;canvas2d上下文为null,经查阅找到相关资料 IOS 创建Canvas过多导致getContext(‘2d’) 返回null 总 Canvas 内存…

Programming abstractions in C阅读笔记:p132-p137

《Programming Abstractions In C》学习第53天&#xff0c;p132-p137&#xff0c;3.2小节“strings”总结如下&#xff1a; 一、技术总结 3.2小节介绍了字符串的用法&#xff1a; 1.C语言是没有字符串(string)这种数据类型的&#xff0c;但是实际的场景中又很需要这种数据类…

自身免疫诊断原料——博迈伦

自身免疫诊断原料是指用于自身免疫性疾病诊断的试剂或材料。自身免疫性疾病是指机体免疫系统对自身组织发生异常免疫反应的疾病&#xff0c;如类风湿性关节炎、系统性红斑狼疮、多发性硬化症等。自身免疫诊断原料为这些疾病的早期筛查、诊断和监测提供了重要的工具。 以下是一些…

Python魔术方法

什么是魔术方法&#xff1f; 所有以双下划线__包起来的方法&#xff0c;统称为Magic Method&#xff08;魔术方法&#xff09;&#xff0c;它是一种的特殊方法&#xff0c;普通方法需要调用&#xff0c;而魔术方法不需要显示调用就可以执行。 魔术方法在类或对象的某些事件出…

wow.js使用和动画只执行一次问题优化

wow.js配合第三方动画库可以让元素出现在屏幕时执行相关的动画 wow.js依赖于animate.css&#xff0c;首先在头部引用animate.css或者animate.min.css。在最底部或引入的css下面引用wow.js或者wow.min.js使用规则直接查看官网&#xff1a;wow.js — Reveal Animations When Scro…

【校招VIP】前端算法考察之排序

考点介绍&#xff1a; 不同的场景中&#xff0c;不同的排序算法执行效率不同。 稳定&#xff1a;冒泡、插入、归并 不稳定&#xff1a;选择、快速、堆排序、希尔排序 『前端算法考察之排序』相关题目及解析内容可点击文章末尾链接查看&#xff01; 一、考点题目 1、使用js实…

EOCR-SE2/EOCRSE2在数控技术行业的应用

EOCR-SE2电动机保护器是施耐德EOCR系列中一款以低成本、高性能著称的产品&#xff0c;其广泛应用于各种机床设备中。 EOCRSE2-05RS品牌&#xff1a;施耐德&#xff0c;产地&#xff1a;韩国益山工厂&#xff0c;型号&#xff1a;EOCR-SE2,电流范围&#xff1a;3-30A&#xff0…

DQL语句的执行顺序

DQL语句的通用结构如下所示 Select 子段列表 From 表名列表 Where 条件列表 Group By 分组子段列表 Having 分组后条件列表 Order By 排序子段列表 Limit 分页参数在执行DQL语句时会有一定的执行顺序&#xff1a; 首先执行From 表名列表操作然后执行where 条件列表来指定查询…

541. 反转字符串 II

541. 反转字符串 II 给定一个字符串 s 和一个整数 k&#xff0c;从字符串开头算起&#xff0c;每计数至 2k 个字符&#xff0c;就反转这 2k 字符中的前 k 个字符。 如果剩余字符少于 k 个&#xff0c;则将剩余字符全部反转。 如果剩余字符小于 2k 但大于或等于 k 个&#xff…

工服穿戴检测算法 工装穿戴识别算法

工服穿戴检测算法 工装穿戴识别算法利用yolo网络模型图像识别技术&#xff0c;工服穿戴检测算法 工装穿戴识别算法可以准确地识别现场人员是否穿戴了正确的工装&#xff0c;包括工作服、安全帽等。一旦检测到未穿戴的情况&#xff0c;将立即发出警报并提示相关人员进行整改。Yo…