基於Ant Design Pro 的修改的項目 (多標籤tabs、拖拽、富文本、多功能table、多選Select)

時間 2019-11-29

標籤基於 ant design pro 修改項目標籤 tabs 文本多功能 table select 欄目自動化構建简体版

原文原文鏈接

Ant Tabs（pro 2.0）

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

實現多頁籤的原理及思路

Ant Tabs 基於 Ant Design Pro 2.0 基礎上修改的多標籤Tabs，修改此多標籤也是工做上的需求，原來後臺項目也是基於 Antd Design 來開發的，在 github上demo也不是不少，基本上也不符合本身的需求，因而就本着本身動手,豐衣足食的思想，本身在Antd Design的基礎上修改了部分文件。node

可是，中間也走了不少彎路，踩了不少坑，修改了多個版本最終才成了如今的需求，不過我以爲還能夠，僅供你們參考。react

引入 ant Tabs

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

代碼解析github

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)} 複製代碼