首页 > 其他分享 >vue+element ui <el-table>中有多页数据,查看完详情,回到查看前的页码

vue+element ui <el-table>中有多页数据,查看完详情,回到查看前的页码

时间:2022-11-08 18:02:50浏览次数:33  
标签:vue 查看 route element query 数据 queryParams 页面

vue+element ui <el-table>中有多页数据,查看完详情,回到查看前的页码_表数据

我们的查看里面有添加部分数据的功能,添加成功后,页面返回关闭,页面需要重新调取接口获取新的数据,但是客户的需求是,关闭后,还应回到当前页,而不是回到第一页。

思路:将当前页面的接口参数 查看时,带入‘查看’页面,页面关闭时,将参数再次带回列表页,其实就是一个传参的功能。

代码如下:列表页面

 created () {
if (this.$route.query.queryParams) {
this.queryParams = this.$route.query.queryParams // 参数
console.log('this.queryParams', this.queryParams)
this.getList()
} else {
this.getList() // 获取列表数据的接口
}
}

查看页面:

beforeRouteLeave (to, from, next) {
to.query.queryParams = this.$route.query.queryParams
next()
},


标签:vue,查看,route,element,query,数据,queryParams,页面
From: https://blog.51cto.com/u_15402941/5833983

相关文章

  • vue2 二次封装 element --- el-form 表单自定义组件
    一、form组件<template><divref="searchHeader"class="div_searchsearch_title"style="padding-right:10px"><el-formref="dataForm":model="formObj......
  • 分享一个重启、查看jar包状态的sh脚本
    很多时候我们部署jar包到服务器上的时候,都需要准备一个重启、查看jar包状态的sh脚本,本文分享一个。拿去即可用,把它放到和jar包同一个目录里即可,可以给它取个名字叫app.sh......
  • vue+element ui <el-tabs>中刷新页面不要回到初始页面
    公司新加了一个需求,每个tab栏下的页面里面有查看详情的接口,查看后返回到查看前的tab页面。刚开始每次返回都返回到待处理的页面,显然不符合需求。思路:每次点击tab栏,将当前页......
  • Vue中实现输入框Input输入格式限制
    在开发过程中,基本都遇到过需要限制输入的情况,比如金额、仅字母数字、可输入小数位等,网上搜了很多方法也遇到一些坑,所以我把自己用的一些方法分享出来,希望对有需要的人有所帮......
  • vue slot的一点理解
    先来一个实例,方便解释:子组件:<template><div><button></button><slot>这里是默认值</slot><slotname="one">这里是默认值one</slot><slotname......
  • vue中使用Element
    官网https://element.eleme.cn/#/zh-CN/component/installation安装npm安装elementnpmielement-ui-S快速上手引入Element在main.js中写入以下内容:importVu......
  • 用命令行创建vue项目
    准备打开命令行安装 vue-cilnpminstall-g@vue/cli安装完成就可以使用 vuecreate 创建项目1.基于命令行的方式创建vue项目vuecaeatevue2.基于图形化界面的方......
  • vue export和import
    export点击查看代码//m1.js//分别暴露exportletschool="XX学校";exportfunctionteach(){ console.log("教学");}//m2.js//统一暴露letschool="......
  • vue.js3:div上添加右键菜单([email protected])
    一,js代码:<template><div><divstyle="width:800px;margin:auto;display:flex;flex-direction:column;"><div>请选择上传图片:<inputtype="......
  • elementUI table 数组中各项加逗号隔开
    js处理//this.newTableData数组this.newTableData.map((item,index)=>{//item.label数组if(item.label){......