Ant Design Pro支持多Tabs布局（支持类似vue的keepalive功能）

已于 2023-11-23 10:34:55 修改
阅读量657 收藏
点赞数
文章标签： 前端 ant-design-pro
于 2023-11-21 10:43:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/atec2000/article/details/134526279
版权

最近umi升级到umi4了，Ant Design Pro也升级了，已经内置了多Tabs布局并支持类似vue的keepalive功能，在项目创建好之后，只需要一些简单的配置就可以了。

只需要一些简单的配置

配置文件：config/config.ts

  // 多Tabs布局，只需要配置下面两项即可
  keepalive: [/./],
  tabsLayout: {}, 

atec2000
关注
Umi4 antDesign Pro 实现多 tabs (keep-alive)
https://shixuebin.gitee.io/hexo-blog/
04-06 1822
最近umi升级到umi4了，antDesignPro也有升级，看到最新的消息，是antDesignPro已经内置了多tabs功能了，在项目创建好之后，只需要一些简单的配置就可以了。在配置项中新增这2个配置项就可以了，其他的都不需要动，然后刷新页面，效果出来,配置文件：config/config.ts。
vue3+ant-design-vue - 最新实现“侧边动态导航栏+面包屑导航“功能，vue3+ant后台管理系统左侧动态菜单栏和面包屑菜单实现，面包屑和菜单根据路由动态自动处理（详细示例代码）
高级前端工程师
04-02 2739
vue3，ant-design-vue，antd，el-breadcrumb，a-menu，动态导航栏和面包屑，vue3+ant design vue动态面包屑，动态导航栏，菜单栏，vue3监听路由变化,动态修改面包屑，antd-vue3实现面包屑，vue3中使用antd-vue实现面包屑导航，头部面包屑导航，vue后台管理系统，面包屑头部导航栏，详细示例demo，动态生成面包屑导航教程，新手小白详细示例，面包屑和布局和菜单demo，面包屑和导航菜单的联动，如何跟随路由变化，监听路由变化,动态修改面包屑，v
ant-design-pro-V5-multitab:基于 ant design pro V5 版本实现多标签切换 基于umi插件 umi-plugin-keep-alive 实现 （目前只支持layout
05-25
ant-design-pro-V5-multitab 基于 ant design pro V5 版本实现多标签切换 基于umi插件 umi-plugin-keep-alive 实现 （目前只支持layout: "side"模式， fixedHeader: true,）
基于Ant Design Pro的多页签功能实现教程
最新发布
gitblog_00661的博客
09-13 877
基于Ant Design Pro的多页签功能实现教程 项目地址:https://gitcode.com/gh_mirrors/an/antd-pro-keepalive-tabs 项目介绍 antd-pro-keepalive-tabs 是一个基于 Ant Design Pro 5 实现的多页签功能项目。该项目通过自定义布局和路由管理，实现了类似 Vue 的 keep-alive 功能，使得在切换...
2024手把手 基于ant design pro 6实现多tab页(路由keepalive) 动态配置可刷新 右键菜单 删除其他/刷新/拖拽
muge1161105403的博客
08-07 1033
其实ant pro已经内置了多tabs页面，无需手写，插件为 alitajs，点我打开官网由于需要动态配置部分网页是否刷新，或需要增加额外功能，那么只能使用自定义tab了。
手把手带你基于ant design pro 5实现多tab页(路由keepalive)
fudebao的博客
03-20 4937
前几天在一个前端群里，看到一位群友在吐槽react不支持keepalive，没办法实现多页签，这篇文章就我就用react 基于antd pro 5实现一下这个功能。
ant design pro v5 - 07 多标签窗口 多窗口打开
haiyabtx
10-18 1741
React + TypeScript + Ant Design Pro V5.2 开箱即用的中台前端/设计解决方案。 多标签窗口 多窗口打开
antd pro v5 tab标签卡（多标签页）实现
星宇大前端
05-04 7261
多标签页很多公司的后台管理系统都会有这个需求，之前用vue一般架子也是带的，现在公司用了antd pro ，看了下官方不支持，确实会影响性能，但是架不住需求。 背景 先看下远古截图： https://github.com/ant-design/ant-design-pro/issues/220 17年提出的需求现在还没有实现，看样官方也是铁了心了。在看看提供的其他解决方案： https://github.com/LANIF-UI/dva-boot-admin https://github.com/.
（基于pro 2.0）基于Ant Design Pro 的 (多标签tabs、拖拽、富文本、多功能table、多选Select)
zifeiyu的博客
04-23 3539
Ant Tabs（pro 2.0） 本文介绍Ant Tabs一些 新增的功能和原理及思路介绍及更新日志。 实现多页签的原理及思路 Ant Tabs 基于 Ant Design Pro 2.0 基础上修改的多标签Tabs，修改此多标签也是工作上的需求，原来后台项目也是基于 Antd Design 来开发的，在 github上demo也不是很多，基本上也不符合自己的需求，于是就本着自己动手,丰衣足食...
antd pro(V5) 实现多tab
qq_27175079的博客
01-23 4615
官方不支持多tab，所以需要自己去处理根据以往的经验这个不是很复杂，主要的技术点如下： 1.样式（抄的vue-element-admin） 2.antd pro项目干预点app.tsx import TagView from '@/components/TagView'; import EventEmitter from '@ytCommon/utils/eventEmitter'; //发布订阅 layout headerRender方法返回TagView onPageChange 页面改变的时候利用
解决vue-router 切换tab标签关闭时缓存问题
01-19
在router入口页面加上 keepAlive: true // 需要被缓存 false则不需要 { path: 'fundProListG', component: resolve => require(['@/pages/product/fundPros/fundTab/fundTab.vue'], resolve), title: '基金首页...
vue 实现tab切换保持数据状态
10-15
在Vue开发过程中，保持数据状态是常见的需求，特别是在实现Tab切换功能时，用户可能希望在切换Tab后，之前填写的数据或者加载的内容能够被保存。本文将深入探讨如何在Vue中实现Tab切换时保持数据状态。 首先，让...
vue中怎么清空tab选项卡的缓存_Vue缓存 菜单、多Tab解决方案
weixin_39536728的博客
12-22 1469
1.需求在项目开发中，前端难免遇到需要路由缓存的需求。在之前一个React项目中，查询各种资料和插件后，了解到React要配合React-router进行路由缓存，会有很多意想不到的问题。所以在React项目中，我们都避免接收到需要路由缓存的需求。最近在开发一个vue项目中，由于vue原生有Keep-alive组件以及include，exclude的各种api来实现路由缓存。所以我们决定大胆的接下...
java入职学习六之前端UI（element-ui,ant-design-vue）
Yzq12312的博客
12-12 869
一、element-ui 1.简介 element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。 其设计原则为： 一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 反馈 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作； 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。 效率
antd-design-pro实现多页签，切换页签保留缓存，keep-alive
前端小白成长记
12-21 8950
感谢该大佬提供的组件：GitHub - CJY0208/react-activation: Hack <KeepAlive /> for React react 里 keep-alive 的实现目前是黑科技，会有些问题 使用过程中遇到问题的话，可以优先看这儿 https://github.com/CJY0208/react-activation/blob/master/README_CN.md#breaking-change-%E7%94%B1%E5%AE%9E%E7%8E%B0%E5%.
antd-pro v5版本的tab页签最简实践
qq_36990322的博客
06-29 3993
antd-pro v5版本的tab页签最简实践 前言 网上找了很多资料，也看了好些个代码，总觉得他们写的太累赘了。其实官方自己也说了，antdpro做页签和他们的产品理念不符合才不做，但是不代表他们没给我们预留修改空间，但是找了好多代码都没找到一个合适的插件。经过对layout组件的一番研究，但其实官方团队还是给我们预留了空间的，所以我也就是依据官方的预留空间做了一个最简实践，只需要写一个组件，加几行layout配置代码即可实现页签功能。 提醒 该写法肯定是会存在性能问题的，但是一般的项目用用是没啥问题的。
umi-antd-pro::ghost:use umi conventional routing in Ant Design Pro 使用umi约定式路由多Tabs的Ant Design Pro（Antd Pro的实验项目）
05-22
English || | | 蚂蚁设计专业版 适用于企业应用程序的即用型UI解决方案，作为React样板。 预览： ： 主页： http ： //pro.ant.design 文档： http : //pro.ant.design/docs/getting-started 变更日志： http : //pro.ant.design/docs/changelog 常见问题解答： http ： //pro.ant.design/docs/faq 中国镜像网站： http ： //ant-design-pro.gitee.io 2.0版现已发布！ :party_popper: :party_popper: :party_popper: 宣布Ant Design Pro 2.0.0 翻译招聘 :loudspeaker: 我们需要您的帮助： https : //github.com/ant-design/ant-design-pro/issues/120 特征 :gem_stone:
react,umi,antd-pro的layout封装过程
Coralpapy的博客
12-09 1600
import React from 'react'; import { Layout, Form, Icon } from 'antd'; import isEqual from 'lodash/isEqual'; //深度比较对象 import memoizeOne from 'memoize-one'; //降低渲染的函数复杂度，提高性能 import { history, connect } from 'umi'; import { ContainerQuery } from 'react-co..
ant design pro多页签功能
nbin2008的博客
07-11 563
ant design pro4，多页签处理
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值