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

原创 已于 2023-11-23 10:34:55 修改 · 983 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #ant-design-pro

于 2023-11-21 10:43:19 首次发布
本文介绍了umi4.0版本升级后，AntDesignPro集成的多Tabs布局和类似Vue的keepalive功能，用户在项目中仅需少量配置即可实现这些高级特性。

最近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 2347
最近umi升级到umi4了，antDesignPro也有升级，看到最新的消息，是antDesignPro已经内置了多tabs功能了，在项目创建好之后，只需要一些简单的配置就可以了。在配置项中新增这2个配置项就可以了，其他的都不需要动，然后刷新页面，效果出来,配置文件：config/config.ts。
vue3+ant-design-vue - 最新实现“侧边动态导航栏+面包屑导航“功能，vue3+ant后台管理系统左侧动态菜单栏和面包屑菜单实现，面包屑和菜单根据路由动态自动处理（详细示例代码）
高级前端工程师
04-02 1万+
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中layout布局与table踩坑
Y4258的博客
04-15 1489
layout是antDesign中一个布局方式，它分为头部，内容，边和底部，是一个很好用的布局方式 官网上是这样写的，在使用的时候加上是写在 中 这样写并没有任何问题，但是如果你的项目中有表格，那么你就要小心了，它可能会悄悄地改变你的表格，你可能还不知道 在layout中写一个表格，表格默认是白色，但是受本身的影响，会变成灰色！！ 要想把表格变回去，方法很简单，就是把layout删掉。 总结遇到的问题，养成习惯 ...
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,）
antd-pro v5版本的tab页签最简实践
qq_36990322的博客
06-29 4226
antd-pro v5版本的tab页签最简实践 前言 网上找了很多资料，也看了好些个代码，总觉得他们写的太累赘了。其实官方自己也说了，antdpro做页签和他们的产品理念不符合才不做，但是不代表他们没给我们预留修改空间，但是找了好多代码都没找到一个合适的插件。经过对layout组件的一番研究，但其实官方团队还是给我们预留了空间的，所以我也就是依据官方的预留空间做了一个最简实践，只需要写一个组件，加几行layout配置代码即可实现页签功能。 提醒 该写法肯定是会存在性能问题的，但是一般的项目用用是没啥问题的。
手把手带你基于ant design pro 5实现多tab页(路由keepalive)
fudebao的博客
03-20 7375
前几天在一个前端群里，看到一位群友在吐槽react不支持keepalive，没办法实现多页签，这篇文章就我就用react 基于antd pro 5实现一下这个功能。
手把手 基于ant design pro 6实现多tab页(路由keepalive) 动态配置可刷新 右键菜单 删除其他/刷新/拖拽
muge1161105403的博客
08-07 2838
其实ant pro已经内置了多tabs页面，无需手写，插件为 alitajs，点我打开官网由于需要动态配置部分网页是否刷新，或需要增加额外功能，那么只能使用自定义tab了。
ant design pro v5 - 07 多标签窗口 多窗口打开
haiyabtx
10-18 2003
React + TypeScript + Ant Design Pro V5.2 开箱即用的中台前端/设计解决方案。 多标签窗口 多窗口打开
vue+antdesign开发踩坑记录之keep-alive刷新tab-pane
qq_37485170的博客
05-30 554
奇奇怪怪的产品大佬们提了个反人类的需求，要根据有无数据显示不同的pane面板，没有就不显示，但是pane业务每个面板调用的接口都不一样当然还有一点就是项目也很古老，用的是antdesign-1.x和vue2,使开发过程变得爽之又爽。。。
Ant Design Pro 多标签页面（自动关闭、状态保留、使用、不同详情页、url直接访问等）显示的SPA中后台模板
lilin0503的专栏
03-24 3810
基于Ant Design Pro 4、Tab 公司项目有使用Ant Design Pro 4多标签多开页面的需求，网上搜索了一圈都不太符合自身需求，本着自己动手的思想就搭了一个供大家参考。 实现思路： 传统单页面路由切换时替换```<content></content>```内组件，在原来的基础上嵌套一层tabs,类似`<tab><content...
antd pro v5 tab标签卡（多标签页）实现
星宇大前端
05-04 7828
多标签页很多公司的后台管理系统都会有这个需求，之前用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/.
umi4+antDesignPro实现多tabs
放羊的小孩
07-06 4754
um4+antdesign实现多tabs
antd-design-pro实现多页签，切换页签保留缓存，keep-alive
前端小白成长记
12-21 9649
感谢该大佬提供的组件：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_27175079的博客
01-23 4766
官方不支持多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 页面改变的时候利用
【亲测免费】 基于Ant Design Pro的多页签功能实现教程
最新发布
gitblog_00661的博客
09-13 1195
基于Ant Design Pro的多页签功能实现教程 项目介绍 antd-pro-keepalive-tabs 是一个基于 Ant Design Pro 5 实现的多页签功能项目。该项目通过自定义布局和路由管理，实现了类似 Vue 的 keep-alive 功能，使得在切换页签时能够保持组件状态，提升用户体验。项目使用了 React、Umi 和 Ant Design 等前端技术栈，适合需要多页签功...
react,umi,antd-pro的layout封装过程
Coralpapy的博客
12-09 1706
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 1188
ant design pro4，多页签处理
ant-design-vue 之Tabs 标签页
热门推荐
不想起床
01-09 1万+
基本代码 <template> <div> <a-tabs defaultActiveKey="1" @change="callback"> <a-tab-pane tab="Tab 1" key="1">Content of Tab Pane 1</a-tab-pane> <a-tab-pane tab="Ta...
antd vue Tabs控件的使用
qiulei_21的专栏
03-09 7058
antd vue中tabs控件的使用，以及结合component元素、KeepAlive、nextTick的使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值