2024最新 基于ant design pro 6实现多tab页(路由keepalive) 切换tab可刷新页面（可配置非缓存路由） 右键菜单 删除其他/删除左侧菜单/删除右侧菜单/刷新/刷新当前

1、前言

其实ant pro已经内置了多tabs页面，无需手写，插件为 alitajs，点我打开官网

2、使用

// config/config.ts
在配置项中加上这几行即可
{
  keepalive: [/./],
  tabsLayout: {
    hasDropdown: true,
  },
}

3、切换tab时如何刷新当前tab页？

由于缓存，页面只会在第一次加载数据，第二次就不会加载了。但由于某些需求，这个tab列表的增删改查可能会影响另一个tab列表的展示，所以需要切换特定tab的时候刷新列表。
这个时候就需要自定义tabs了

3.1 修改配置

// config/config.ts
  tabsLayout: {
    hasDropdown: true,
    hasCustomTabs: true,//增加这行
  },

3.2 修改路由

  {
    name: 'list.table-list',
    icon: 'table',
    path: '/list',
    component: './TableList',
    keepAlive: false,//不需要缓存的页面增加这个
  },

3.3 自定义getCustomTabs ，刷新指定页面

基本都是官网上贴的的代码，少量修改即可

import routes from '../config/routes';
// 获取路由keepAlive为false的路径的函数
const getNotKeepAlive = (routes: any[]) => {
  let paths: any[] = [];
  routes.forEach(route => {
    if (route?.keepAlive === false) {
      paths.push(route.path);
    }
    if (route?.routes) {
      paths = paths.concat(getNotKeepAlive(route.routes));
    }
  });
  return paths;
};
const flatList: string[] = getNotKeepAlive(routes)//拿到路由keepAlive为false的路径数组

//这是默认配置项，代码不贴了
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {}

//核心代码
export const getCustomTabs = () => {
  return ({
    isKeep,
    keepElements,
    navigate,
    dropByCacheKey,
    local,
    activeKey,
    refreshTab
  }: any) => {

    return (
      <div className="rumtime-keep-alive-tabs-layout" hidden={!isKeep}>
        <Tabs
          hideAdd
          onChange={(key: string) => {
          	//刷新处理在这里，比较简单
            if (flatList.includes(key)) {
              refreshTab(key)
            }
            navigate(key);
          }}
          activeKey={activeKey}
          type="editable-card"
          onEdit={(targetKey: string) => {
            const pathList = Object.keys(keepElements.current)
            if (pathList.length === 1) {
              message.info('至少要保留一个窗口')
              return
            }
            dropByCacheKey(targetKey)
            if (targetKey === activeKey) {
              // 删除当前选中的tab时:
              // 1.如果当前tab是第一个时自动选中后一个
              // 2.不是第一个时自动选中前一个
              const i = pathList.indexOf(targetKey)
              navigate(pathList[i === 0 ? i + 1 : i - 1])
            }
          }}
        >
          {Object.entries(keepElements.current).map(
            ([pathname]: any) => {
              return (<TabPane tab={`${local[pathname] || pathname}`} key={pathname} />)
            },
          )}
        </Tabs>
      </div>
    );
  };
};

3.4 效果图

Admin组件只在进来后加载一次，后续切换都会读缓存，而TableList每次切换都会刷新

上面代码即可实现 刷新指定路由的多tab了
---------------------------------------------------分割线---------------------------------------------------

4、tab增加右键菜单

下面是具体分析，不想看的话，直接拉到最后复制完成代码即可

4.1、添加右键菜单

通过antd的Dropdown（trigger={[‘contextMenu’]} 右键触发）组件可以轻松实现右键菜单

<Tabs
            items={renderTabItems()}//在这里自定义items项
        />