element UI+renrenfast-Vue实现页面跳转和参数传递

news/2024/11/8 3:11:16/

需求:实现renrenfast-vue表格,通过按钮进行页面跳转并参数传递

请添加图片描述

  1. 创建按钮:
 <!-- cell-click,当点击表格一行的数据时,会触发这个时事件,可以获取到该行的显示数据和对应的字段数据(注意是一整行) -->
<el-table @cell-click="getDetailMessage"><el-table-column fixed="right" label="操作" width="150"><template slot-scope="scope"><el-button type="primary" plain size="small">详情</el-button></template></el-table-column>
</el-table>
  1. 编写触发函数代买
//row 表示行数据,column表示列数据getDetailMessage(row, column, event, cell) {// 这里我没有因为没有找到按钮可以传递数据的方式,所以是对整行进行绑定的,简单来说你点击这一行任意一个地方都会触发该函数,但我只想在单击详情时才触发,所以通过传递的列数据进行判断。if (column.label === "操作") {// 页面跳转并携带参数  query表示get请求,后面携带参数,param表示post请求,如果操作正常你可以在请求地址中看到请求参数。this.$router.push({ name: 'detail-page', query: { userID: row.id } })}}

需要注意一点,假如这一行还有其他的按钮绑定了单击事件,那就对标签进行修改,防止事件冒泡。

 <!--.stop-->
<el-button @click.stop="handleClick" type="success" plain size="small">通知</el-button>

在上面的代码 this.$router.push({ name: 'detail-page', query: { userID: row.id } })中的name不是随便取的,是根据系统绑定的路径名写的。你可以通过查看自己的菜单路径来填写。

如果你是通过自带的菜单管理创建的页面链接,并填写了路径,该数据就会在数据库中,并显示到控制台中。

请添加图片描述

请添加图片描述

  1. 另外一个页面接收传递过来的参数
this.$route.query.你传递过来的数据(来获取你传递的参数)

总结

​ 这个页面跳转的方式,确实感觉不是很好,但我确实不会了,先暂时替代使用,如果您有更好的方法,希望能教我一下感谢。


http://www.ppmy.cn/news/514840.html

相关文章

Vue路由的下载与使用

1. 在使用 vue的路由之前需要通过 yarn安装对应的依赖项 yarn add vue-router3.5.1 2. 导入 vue-router import VueRouter from vue-router 3. 注册全局组件 Vue.use(VueRouter) 4. 配置验证规则数组 const routes [{path: /find, // 路径name: Find, component: Find…

Vue2.0 路游

安装 npm install vue-router3.5.2 -S 新建文件夹router 新建index.js // 1.导入Vue和VueRouter包 import Vue from vue import VueRouter from vue-router// 2.把VueRouter安装成Vue插件 Vue.use(VueRouter)// 3.创建路由的实例对象 const router new VueRouter()// 4.对外共…

totolink路由器虚拟服务器,不怕没信号 TOTOLINK-N350R路由器任你用

拥有同类产品的5倍信号&#xff0c;信号王非TOTOLINK-N350R莫属。亚太区中高端无线路由第一品牌TOTOLINK&#xff0c;在韩国市场占有率达82.3%。 N350R采用11N技术&#xff0c;无线传输速率最高可达300Mbps。提供更高的无线带宽&#xff0c;使局域网内的数据传输更加高效&#…

vue3路由设置和安装elmentUI

Vue3设置路由 1. 首先安装路由 npm install vue-router2. 在min.js中引入 import { createApp } from vue import App from ./App.vue import router from ./router/router// createApp(App).mount(#app) const appcreateApp(App) app.use(router) app.mount(#app)3.App.vue…

二、python Django路由[基本操作、路由反向解析、路由重定向]

django 3.2.13 一、路由 1.1 urls.py 基础&#xff1a; # 主urls文件 from django.contrib import admin from django.urls import path,includeurlpatterns [path(admin/, admin.site.urls),// 读取根目录的路由path(index/,include(app1.urls))// 读取app目录里面的路由&…

Vue的路由导航

一、要学习vue-router就要先知道这里的路由是什么&#xff1f;为什么我们不能像原来一样直接用标签编写链接哪&#xff1f;vue-router如何使用&#xff1f;常见路由操作有哪些&#xff1f;等等这些问题&#xff0c;就是本篇要探讨的主要问题 二、vue-router是什么 这里的路由…

mapboxgl中的symbol碰撞检测随笔

在mapboxgl里面&#xff0c;symbol的碰撞检测是通过计算symbol的二维边界框&#xff0c;然后设置顶点透明度来实现symbol淡入淡出效果来模拟碰撞。 GridIndex是一个二维空间数据结构&#xff0c;使用一个 2D 平面作为“视口”——即设备屏幕的平面。 碰撞检测算法的输出用于将…

教你做4F上外网和路游设置

映射IP建外网服务器 端口映射软件内有注册码-在线解决SF网络单机问题 http://218.22.112.158/mir2/portmapv1.0.exe 注意: 红灯:端口被使用 绿灯:启动成功 把端口映射软件所在的机子 系统时间改为2003年之前&#xff0c;比如&#xff1a;2002/01/01 新增SQL曰志清楚器(12月30号…