一、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的選單...