ruoyi页面切换查询条件保留

news2024/11/24 6:08:27

场景描述

业务遇到需求,管理平台的页面打开后输入的查询条件、已经点击的页码、已经查询的数据要求保留下来,在tab菜单切换时保留,在关闭菜单时重置清空。

解决方案

1.使用cookie、localStorage或者sessionStorage

这个方式能解决部分需求,比如记录下查询条件或者页码之类的,但是有缺陷,储存大小有限制。

cookie数据大小不会超过4K,session storage和local storage可以达到5M。不是好的办法,可以满足如全局检索条件这种需求。

2.使用vue的keep-alive

keep-alives是组件缓存,主要用于保留组件状态或避免重新渲染,意思是说vue页面的created等只执行一次。这能做什么呢?这可做的多了,这样的话我们可以将查询条件或者已查询到的数据在created时保留,切换tab时由于没有重新渲染不会重新created,但是在关闭菜单后再打开菜单又会重新渲染并执行created。

这时只需要在created时重置查询条件和页码及查询数据对象,再执行查询后台并保留这时的查询条件及数据即可实现需求。

这种方式可以解决页面使用的是同一组件这种场景。因为使用同一组件时,不使用keep-alive的话不管是进行tab菜单切换还是关闭后重新打开菜单都会重新渲染,都会执行created等之后的步骤。

代码实现

一、要使用keep-alive需要满足2点:

1.路由配置文件设置keepAlive=true

//index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/bookOrder',
      name: 'BookOrder', 
        // 设置keepAlive属性
      meta: {
        keepAlive : true 
      },
      component: resolve => require(['@/views/order/BookOrder'], resolve)
    }
  ],
  mode:'history'
})

2.标注需要缓存的组件,用<keep-alvie>包裹

若以ruoyi的AppMain.vue

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view v-if="!$route.meta.link" :key="key" />
      </keep-alive>
    </transition>
    <iframe-toggle />
  </section>
</template>

<script>
import iframeToggle from "./IframeToggle/index"

export default {
  name: 'AppMain',
  components: { iframeToggle },
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

3.页面vue文件的name要与Router中的name一致

比如上面Router中name是BookOrder,则bookOrder.vue中也必须是这个

export default {
  name: "BookOrder",
    data{}
}

二、实现

组件MyTempPage.vue

//关键代码
data() {
.....

    // 总条数 从需要留存的数据中读取
      total: this.config.remainData.total,
      // 表格数据 从需要留存的数据中读取
      tableList: this.config.remainData.tableList,
      .....
      // 查询参数
      queryParams: this.config.queryParams,
.....

},

created() {
//清空查询条件、页码、缓存的数据
this.queryParams=this.config.queryParams= {};
      this.config.remainData = {tableList:[],total:0}
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.resetForm("queryForm");

//请求后台
this.getList();

},

methods: {
//请求后台
getList() {
      this.loading = true;
      if(this.config.parseQueryParams) this.config.parseQueryParams(this.queryParams);
      this.api.list(this.queryParams).then(response => {
        let list = response.rows;
        if(this.config.parseData) list.forEach(this.config.parseData)
        this.tableList = response.rows;
        this.total = response.total;
        this.loading = false;
        //留存数据
        this.config.remainData.tableList = response.rows;
        this.config.remainData.total = response.total;
      });
    },
},
activated() {
    //不需要记录数据的页面,重新执行查询
    if(!this.config.isRemainData) {
      //重新加载数据
      this.getList();
    }

  }

三、效果展示

Q&A

Q:ruoyi需要自己做keep-alive吗?

A:不用,ruoyi已经实现了。反映在哪里了呢?注意看 系统管理-菜单管理-编辑-是否缓存

Q:我用的是ruoyi,菜单设置是否缓存选择的缓存,为啥actived和deactivated没生效啊?

A:注意页面vue文件的name要与Router中的name一致,另外注意ruoyi在做动态router时的代码

所以vue页面中的name也需要是首字母大写的

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

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

相关文章

windows10或者Ubuntu20.04内启动USB外接摄像头并拍照

1. windows10系统内启动摄像头并拍照 1.1 把带摄像头的USB接口插到电脑的USB接口上。 1.2 左下角搜索“设备管理器”&#xff0c;并点击&#xff0c;主要是确保笔记本自带的摄像头被禁用&#xff0c;和usb连接的外部摄像头被起用。 1.3 左下角搜索“相机”&#xff0c;并点击拍…

读《effective modern c++》笔记总结

文章目录 一、类型推导与auto模板类型推导ParamType是一个指针或引用&#xff0c;但不是通用引用ParamType是一个通用引用ParamType即不是指针也不是引用数组实参函数实参 auto类型推导 二、decltype的理解三、优先考虑auto而非显示类型声明四、区别使用&#xff08;&#xff0…

大华 海康 宇视 摄像头 onvif协议 调整时间 开发过程 整理

1、onvif官网 查看SetSystemDateAndTime 方法。 2、下载 ONVIF Device Test Tool 工具&#xff0c;使用教程可以 在这查看。 3、根据Test Tool 工具生成的request进行 Send request 测试。 有了这个本质就是http请求了&#xff0c;我认为可以自己写http请求尝试&#xff0c;我…

大地200C

8芯网线 【24&#xff0c;M03&#xff0c;冷却&#xff0c; m35&#xff0c;m34&#xff0c;m33&#xff0c;m32&#xff0c;24】 冷却【m08开&#xff0c;m09关】 M10夹紧M11松开 M18润滑【m127开&#xff0c;m227关】 X轴&#xff1a;5000 3.0A Y轴&#xff1…

Mybatis-Plus学习4 Page分页

ctrl P 查看可填的属性类型 alt 回车 自动填充数据类型 1、使用Page分页需要先配置config类&#xff0c;加上拦截器 Configuration MapperScan("com/learn/mybatisplus/mapper") public class MybatisPlusConfig {Beanpublic MybatisPlusInterceptor mybatisP…

TiDB 升级利器(参数对比)——TiDBA

作者&#xff1a; 啦啦啦啦啦 原文来源&#xff1a; https://tidb.net/blog/299f0bdc 一.背景 针对 LTS 版本&#xff0c;PingCAP 会提供最多至 3 年时间的常规版本更新&#xff0c;以解决版本运行过程中遇到的问题&#xff0c;以及安全相关的漏洞修复。而对于已经结束维护…

Css面试题

快速居中 flex margin:auto translate position padding和maring的区别 作用对象不同&#xff1a; padding是针对自身的 margin是作用于外部对象的 VW和百分比的区别 百分比有继承关系&#xff0c;继承父级 VW只和设备的宽度有关系 块元素和行内元素 行内元素&…

Vuex基础

Vuex介绍 为什么会有Vuex&#xff1f; https://v3.vuex.vuejs.org/zh/ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 Vue是采用集中式管理组件依赖的共享数…

技嘉 B660M Gigabyte Aorus Pro DDR4 i7-12700F 黑苹果efi引导文件

原文来源于黑果魏叔官网&#xff0c;转载需注明出处。&#xff08;下载请直接百度黑果魏叔&#xff09; 硬件型号驱动情况 主板B660M Gigabyte Aorus Pro DDR4 处理器Intel Core i7-12700F 2.10 GHz, 25M Cache, up to 4.90 GHz已驱动 内存4 x Corsair Vengeance LPX 8GB 3…

多个SecurityFilterChain执行顺序问题,/oauth2/authorization报404

正常要请求/oauth2/authorization/{regId}跳转到authorization-uri进行认证的&#xff0c;但是搭建好之后&#xff0c;请求这个地址竟然直接报404了&#xff0c;说明oauth2的相关filter并没有生效&#xff0c;直接打到了dispatchServlet。 那到底是哪里的问题呢&#xff1f;de…

人机交互技术复习提纲

认知心理学与人机工程学是人机交互技术的理论基础&#xff0c;而多媒体技术、虚拟现实技术与人机交互是相互交叉和渗透的。 图形用户界面的英文简称为GUI GUI的特点是桌面隐喻技术 直接操纵 所见即所得 自然和谐的人机交互阶段 多通道交互 情感计算 虚拟现实 智能用户界面 自…

为了实现上网自由,我做了一个多功能串口服务器

项目作者&#xff1a;小华的物联网嵌入式之旅 介绍&#xff1a;从事电气自动化行业&#xff0c;多次获得物联网设计竞赛&#xff0c;爱好嵌入式设计开发&#xff0c;物联网开发。 设计方案思路的由来&#xff0c;是因为我们现在的开发板基本需要通过串口与WIFI模组或以太网模…

「2024」预备研究生mem-利润与利润率增长率问题

一、利润与利润率 二、增长率问题 易错题&#xff1a; 三、课后题 每日一练&#xff1a;

BC SAP ECC与 S4 pfcg不同

ECC PFCG 这里的账户咯&#xff0c;可以从Excel编辑好后&#xff0c;直接copy进去 但是在S4里里面&#xff0c;一次只能copy 这个页面范围内的行数&#xff0c;我的是14行&#xff0c;这个根电脑的分辨率有干系 &#xff0c;但是一定是不全的

ForkJoinPool的使用以及基本原理

文章目录 一、ForkJoinPool简介二、ForkJoinPool的基本原理1. 分治法2. 工作窃取 三、ForkJoinPool的使用场景1. 递归式的任务分解&#xff1a;2. 数据并行处理&#xff1a;3. 合并结果&#xff1a;4. 并行递归算法&#xff1a;5. 小结&#xff1a; 四、ForkJoinPool的基本使用…

第13节:特色数据——把握宏观经济脉搏

文章目录 中国主要宏观经济指标相关接口本节课任务 中国主要宏观经济指标 GDP&#xff08;国内生产总值&#xff09;&#xff1a;GDP是衡量一个国家或地区经济活动总量的指标&#xff0c;代表了一定时期内该国或地区所有最终产品和服务的市场价值总和。它反映了一个经济体的整体…

【花雕】青少年机器人教育等级评测模拟题_20200715(一级)

随着科技的不断进步&#xff0c;机器人技术已经成为了一个重要的领域。在这个领域中&#xff0c;机械结构是机器人设计中至关重要的一部分&#xff0c;它决定了机器人的形态、运动方式和工作效率。对于青少年机器人爱好者来说&#xff0c;了解机械结构的基础知识&#xff0c;掌…

分布式主键ID生成策略

小程序搜索“ 源码轻舟 ”后续将推出算法和面试模块 坚持学习&#xff0c;好文每日送达&#xff01; 业务系统对分布式ID的要求 唯一性&#xff1a;在分布式系统中&#xff0c;每个节点都需要生成唯一的标识符来确保数据的唯一性。传统的单点生成ID方式无法满足分布式环境下的…

音视频技术开发周刊 | 300

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 著名数据和AI企业Databricks&#xff0c;收购类ChatGPT开源平台MosaicML 6月27日&#xff0c;Databricks在官网宣布&#xff0c;以13亿美元&#xff08;约94亿元&#xff…

浅析便捷生活的新选择——抖音本地服务

抖音是一款风靡全球的短视频分享平台&#xff0c;其本地服务功能的发展也逐渐引起了广泛关注。本地服务是指抖音平台上的用户可以通过平台直接查找并使用周边的各种服务&#xff0c;比如美食外卖、快递配送、家政服务等。本地服务的发展对用户和商家都带来了很多便利和机遇。 首…