基于Ant Design Pro 的修改的项目 (多标签tabs、拖拽、富文本、多功能table、多选Select)

Ant Tabs（pro 2.0）

本文介绍Ant Tabs一些 新增的功能和原理及思路介绍及更新日志。

实现多页签的原理及思路

Ant Tabs 基于 Ant Design Pro 2.0 基础上修改的多标签Tabs，修改此多标签也是工做上的需求，原来后台项目也是基于 Antd Design 来开发的，在 github上demo也不是不少，基本上也不符合本身的需求，因而就本着本身动手,丰衣足食的思想，本身在Antd Design的基础上修改了部分文件。

可是，中间也走了不少弯路，踩了不少坑，修改了多个版本最终才成了如今的需求，不过我以为还能够，仅供你们参考。

引入 ant Tabs

主要修改文件 react-ant/src/layouts/BasicLayout.js 中引入Tabs 组件

代码解析

constructor(props) {
    super(props);
    const {routes} = props.route,routeKey = '/home/home'; // routeKey 为设置首页设置 试试 '/dashboard/analysis' 或其余key值
    const tabLists = this.updateTree(routes);
    let tabList=[];
    tabLists.map((v) => {
      if(v.key === routeKey){
        if(tabList.length === 0){
          v.closable = false
          tabList.push(v);
        }
      }
    });
    this.state = ({
        tabList:tabList,
        tabListKey:[routeKey],
        activeKey:routeKey,
        routeKey
    })

    this.getPageTitle = memoizeOne(this.getPageTitle);
    this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual);
  }
复制代码

• tabList: 用来存储打开的多标签
• tabListKe:用来判断 tabList 是否重复保持tabList标签惟一性
• activeKey:当前激活 tab 面板的 key
• routeKey: 为设置首页设置 试试 '/dashboard/analysis' 或其余key值

updateTree = data => {
    const treeData = data;
    const treeList = [];
    // 递归获取树列表
    const getTreeList = data => {
      data.forEach(node => {
        if(!node.level){
          treeList.push({ tab: node.name, key: node.path,locale:node.locale,closable:true,content:node.component });
        }
        if (node.routes && node.routes.length > 0) { //!node.hideChildrenInMenu &&
          getTreeList(node.routes);
        }
      });
    };
    getTreeList(treeData);
    return treeList;
  };
复制代码

• updateTree函数：为递归 routes 多维数据变成一维数据

<SiderMenu
            logo={logo}
            theme={navTheme}
            onCollapse={this.handleMenuCollapse}
            menuData={menuData}
            isMobile={isMobile}
            {...this.props}
            onHandlePage ={this.onHandlePage}
          />
复制代码

• onHandlePage: 点击左侧及页面内触发的函数

{hidenAntTabs ?
              (<Authorized authority={routerConfig} noMatch={<Exception403 />}> {children} </Authorized>) :
              (this.state.tabList && this.state.tabList.length ? (
              <Tabs // className={styles.tabs} activeKey={activeKey} onChange={this.onChange} tabBarExtraContent={operations} tabBarStyle={{background:'#fff'}} tabPosition="top" tabBarGutter={-1} hideAdd type="editable-card" onEdit={this.onEdit} > {this.state.tabList.map(item => ( <TabPane tab={item.tab} key={item.key} closable={item.closable}> <Authorized authority={routerConfig} noMatch={<Exception403 />}> {/*{item.content}*/} <Route key={item.key} path={item.path} component={item.content} exact={item.exact} /> </Authorized> </TabPane> ))} </Tabs> ) : null)} 复制代码

• hidenAntTabs：添加这个字段为在抽屉屑中控制是否显示多标签

相关连接

• Ant Tabs 源码地址
• Ant Tabs 文档地址
• Ant Tabs 更新日志

更新日志

2019-04-23

• 增长功能：增长了左侧点击出发的函数，及çonHandlePage ={this.onHandlePage}
• 增长文档：主要解释了Ant Tabs的原理及功能

2019-04-18

• 增长功能：AntTableFinder-多功能Table 深度封装 ant Table 表格

2019-04-10

• 增长功能：Tabs-支持多标签功能
• 增长功能：支持-关闭当前标签页、关闭其余标签页、关闭所有标签页
• 增长功能：拖拽组件
• 增长功能：富文本编译器
• 增长功能：支持-是否 隐藏 Ant-Tabs 功能

反馈

若是你以为有用，对你有些帮助，欢迎给个Star😊，若是你还为明白及文中有错误，请提交Issues😊