vue超链接传值、查看页面以及父子传值

在这里插入图片描述

      <el-table-column label="电表编码" align="center" width="120" prop="electricalNum" ><template slot-scope="scope"><div style="text-align: left"><router-link :to="'/equipment/electrical-data/index/' + scope.row.electricalId" class="link-type"><span>{{ scope.row.electricalNum }}</span></router-link><div style="white-space:nowrap">初始表码: <span style="color: #1348ce;">{{ scope.row.electricalInitNum}}</span>&nbsp;</div><div style="white-space:nowrap">结算表码: <span style="color: #1348ce;">{{ scope.row.electricalEndNum}}</span>&nbsp;</div></div></template></el-table-column>

router-link 这里需要去/src/router/index.js里面配置

  {path: '/equipment/electrical-data',component: Layout,hidden: true,permissions: ['equipment:electrical:list'],children: [{path: 'index/:electricalId(\\d+)',component: () => import('@/views/equipment/electrical/electri'),name: 'Data',meta: { title: '电表详情', activeMenu: '/equipment/electrical' }}]},

跳转过来是这样的查看页面 :column 是对应的几列展示
在这里插入图片描述

<el-descriptions class="margin-top" title="电表详情" :column="3" :size="'mini'" border><el-descriptions-item><template slot="label">电表名称</template>{{form.electricalName}}</el-descriptions-item><el-descriptions-item><template slot="label">电表品牌</template><dict-tag :options="dict.type.sys_meter_brand" :value="form.electricalBrand"/></el-descriptions-item></el-descriptions>

这里是获取$route路由传过来的值

  created() {const electricalId = this.$route.params && this.$route.params.electricalId;},

##父子传值
父:方法绑定按钮 传入队友的值 直接就携带值跳转到对应路由

    getBillInfo(row,type){const electricalId = row.electricalId || this.idsthis.$router.push({ path: '/finance/bill', query: { electricalId: electricalId,proprietorPayType:type } }) // 跳转到B},

子:直接路由.query属性就能获取

  created() {console.log(this.$route.query);this.queryParams.proprietorPayType=this.$route.query.proprietorPayType;this.queryParams.electricalId=this.$route.query.electricalId;this.getList();},

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

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

相关文章

深度学习(6)---Transformer

文章目录 一、介绍二、架构2.1 Multi-head Attention2.2 Encoder(编码器)2.3 Decoder(解码器) 三、Encoder和Decoder之间的传递四、Training五、其他介绍5.1 Copy Mechanism5.2 Beam Search 一、介绍 1. Transformer是一个Seq2Seq&#xff08;Sequence-to-Sequence&#xff09;…

mapstruct自定义转换,怎样将String转化为List

源码&#xff1a;https://gitee.com/cao_wen_bin/test 最近在公司遇到了这样一个为题&#xff0c;前端传过来的是一个List<Manager>,往数据库中保存到时候是String&#xff0c;这个String使用谷歌的json转化器。 当查询的时候在将这个数据库中String的数据以List<Mana…

【知识---如何创建 GitHub 个人访问令牌】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言登录到 GitHub 帐户。在右上角的头像旁边&#xff0c;点击用户名&#xff0c;然后选择 "Settings"。在左侧导航栏中&#xff0c;选择 "Develope…

Mysql索引相关学习笔记:B+ Tree、索引分类、索引优化、索引失效场景及其他常见面试题

前言 索引是Mysql中常用到的一个功能&#xff0c;可以大大加快查询速度&#xff0c;同时面试中也是经常碰到。本文是学习Mysql索引的归纳总结。 索引采用的数据结构——B 树 本部分主要是参考自小林Coding B树的由来 二分查找可以每次缩减一半&#xff0c;从而提高查找效率…

对话框与多窗体设计 —— 标准对话框

三、对话框与多窗体设计3.1 标准对话框3.1.1 QFileDialog对话框3.1.2 QColorDialog对话框3.1.3 QFontDialog对话框3.1.4 QInputDialog标准输入对话框3.1.5 QMessageBox消息对话框 三、对话框与多窗体设计 一个完整的应用程序设计中&#xff0c;不可避免地会涉及多个窗 体、对框…

vue---打印本地当前时间Demo

<template><view class"content" tap"getCurrentTime()">打印时间</view> </template><script>export default {data() {return {title: Hello}},onLoad() {},methods: {getCurrentTime() {//获取当前时间并打印var _this …

论文写作之十个问题

前言 最近进入瓶颈&#xff1f; 改论文&#xff0c;改到有些抑郁了 总是不对&#xff0c;总是被打回 好的写作&#xff0c;让人一看就清楚明白非常重要 郁闷时候看看大佬们怎么说的 沈向洋、华刚&#xff1a;读科研论文的三个层次、四个阶段与十个问题 十问 What is the pro…

springboot127基于Springboot技术的实验室管理系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

vue 跨域XMLHttpRequest

vue 跨域 使用XMLHttpRequest 亲测好使 let urlhttp://127.0.0.1:9000/pssnotifyyb?b1//urlhttps://api.j4u.ink/v1/store/other/proxy/remote/moyu.jsonvar xhrnew XMLHttpRequest()xhr.open(GET,url,true)//第三个参数是是否异步请求,默认true xhr.onreadystatec…

Elasticsearch内核解析 - 数据模型篇

Elasticsearch内核解析 - 数据模型篇 - 知乎 Elasticsearch是一个实时的分布式搜索和分析引擎&#xff0c;它可以帮助我们用很快的速度去处理大规模数据&#xff0c;可以用于全文检索、结构化检索、推荐、分析以及统计聚合等多种场景。 Elasticsearch是一个建立在全文搜索引擎…

SpringBoot增加全局traceId日志追踪

文章目录 实现思路定义过滤器返回参数增加traceIdlogback.xml增加traceId 实现思路 增加Filter处理请求&#xff0c;生成traceId保存到TreadLocal中&#xff08;slf4j的MDC&#xff09;增加返回AOP切面&#xff0c;返回数据之前把traceId写到返回实体里日志logback.xml文件配置…

蓝牙 | 软件: Qualcomm BT Audio 问题分析(1)----ACAT Tools安装

大家好&#xff01; 我是“声波电波还看今朝”成员的一位FAE Devin.wen&#xff0c;欢迎大家关注我们的账号。 今天给大家大概讲解“如何排查Qualcomm BT Audio”的疑难杂症&#xff08;一&#xff09;如何安装ACAT Tools。 大家在遇到Audio方面的问题&#xff0c;比如 无声、…

[蓝桥杯]真题讲解:飞机降落(DFS枚举)

[蓝桥杯]真题讲解&#xff1a;飞机降落&#xff08;DFS枚举&#xff09; 一、视频讲解二、暴力代码&#xff08;也是正解代码&#xff09; 一、视频讲解 视频讲解 二、暴力代码&#xff08;也是正解代码&#xff09; //飞机降落&#xff1a; 暴力枚举DFS #include<bits/…

hadoop 问题集

1. org.apache.hadoop.yarn.exceptions.InvalidAuxServiceException: The auxService:mapreduce_shuffle does not exist yarn中没有aux的信息。在yarn&#xff0d;site.xml中加入&#xff1a; <property> <name>yarn.nodemanager.aux-services</name> …

【python】自动微分的一个例子

一、例子 import torchx torch.arange(4.0) x.requires_grad_(True) y 2 * torch.dot(x, x) print(y) y.backward() x.grad 4 * x print(x.grad) 二、解读 1. import torch 这一行导入了PyTorch库。PyTorch是一个开源的机器学习库&#xff0c;广泛用于计算机视觉和自然语…

DAY10_SpringBoot—SpringMVC重定向和转发RestFul风格JSON格式SSM框架整合

目录 1 SpringMVC1.1 重定向和转发1.1.1 转发1.1.2 重定向1.1.3 转发练习1.1.4 重定向练习1.1.5 重定向/转发特点1.1.6 重定向/转发意义 1.2 RestFul风格1.2.1 RestFul入门案例1.2.2 简化业务调用 1.3 JSON1.3.1 JSON介绍1.3.2 JSON格式1.3.2.1 Object格式1.3.2.2 Array格式1.3…

点灯大师(STM32)

这段代码是用于STM32F10x系列微控制器的C语言程序&#xff0c;目的是初始化GPIOC的Pin 13为输出&#xff0c;并设置其输出高电平。以下是对代码的逐行解释&#xff1a; #include "stm32f10x.h" 这一行引入了STM32F10x设备的头文件&#xff0c;包含了用于STM32F10x系…

Linux 命令 grep 的用法简介

Linux 命令 grep 的用法简介 文章目录 Linux 命令 grep 的用法简介基本语法&#xff1a;常见选项&#xff1a;示例&#xff1a; grep 是一个在 Unix 和类 Unix 系统中常用的文本搜索工具&#xff0c;它用于在文件中查找匹配指定模式的文本行。下面是 grep 命令的一些常见选项和…

一站式VR全景婚礼的优势表现在哪里?

你是否想过&#xff0c;婚礼也可以用一种全新的方式呈现&#xff0c;VR全景婚礼让每位用户沉浸式体验婚礼现场感。现在很多年轻人&#xff0c;都想让自己的婚礼与众不同&#xff0c;而VR全景婚礼也是未来发展的方向之一。 很多婚庆公司开通了VR婚礼这一服务&#xff0c;就是通过…