antd pro 4 0 動態選單

2021-10-06 19:15:36 字數 2130 閱讀 7142

一、basiclayout.jsx中獲取服務端傳來的選單json格式的(需要符合config.js中的路由格式)

/**

* ant design pro v4 use `@ant-design/pro-layout` to handle layout.

* you can view component api by:

* */import prolayout, from '@ant-design/pro-layout';

import react, from 'react';

import from 'umi';

import from '@ant-design/icons';

import from 'antd';

import authorized from '@/utils/authorized';

import rightcontent from '@/components/globalheader/rightcontent';

import from '@/utils/utils';

import logo from '../assets/logo.svg';

const nomatch = (

go login

}/>

);/** 重點:自定義了乙個列舉 圖示的方法

原因:後台傳過來的icon:string 再選單中無法顯示圖示

*/ const iconenum = ;

/** * use authorized check all menu item

*/const menudatarender = menulist =>

menulist.map(item => ;

return authorized.check(item.authority, localitem, null);

});const defaultfooterdom = (

, href: '',

blanktarget: true,},,

]}/>

);const basiclayout = props => ,

} = props;

/*** constructor

*/useeffect(() => );

/** 重點:useeffect 相當於生命週期函式

自己再global.js 中新增乙個方法fetchmenu 用來獲取伺服器傳過來選單列表

*/ dispatch();

}}, );

/*** init variables

*/const handlemenucollapse = payload => );

}}; // get children authority

const authorized = getauthorityfromrouter(props.route.routes, location.pathname || '/') || ;

const = useintl();

return (

<>()}

oncollapse=

menuitemrender=

return ;

}}breadcrumbrender=),

},...routers,

]}itemrender=

) : (

);}}

footerrender=

// 這個方法就是自定義選單

menudatarender=

rightcontentrender=

>

dispatch()

}/>

);};export default connect(() => ())(basiclayout);

二、再global.js中新增乙個查詢選單列表的方法

import  from '@/services/user';  // 需要再這個檔案中寫個請求

const globalmodel = ,

effects: ) );

},},

reducers: );

},};export default globalmodel;

動態選單 動態建立選單

動態建立選單 windows應用程式的介面,不僅僅是乙個簡單的窗體,每個窗體中都包含具體實現功 能的控制項,包括能夠顯示基本資訊的label控制項,能夠在其中輸入內容的文字框控制項,能 夠設定選項的選擇按鈕控制項等。net提供了很多使用簡單 功能強大的控制項,幫助程式設 計者快速有效地開發應用軟體。...

動態級聯選單

在專案中遇到最多的就是級聯選單的實現。省級 市級 縣級等等。如果將這些資料放到資料庫中,每一次訪問資料都要鏈結資料庫。目前專案中的做法是select的每一次change事件都要查詢一次。我覺得此次操作有些多餘。先不說這些資料從 得到,或者要不要放到快取中,或者這些資料是不易改變,還是時常改變。我自我...

XML動態選單

大家都愛好xml,由於它省事,我平時做東西也盡可能的用xml,由於實在是日後更新修正太方便了,都不用動fla原始檔。本xml系列教程將分三部分宣布,到最後一期我們將擁有乙個功效全面,更加友愛的xml選單。本教程這個第一期涉及到了一些xml的基礎知識。這裡我們要做的後果是乙個縱向排列的動態xml的選單...