Ant-design-pro的動態菜單的實現


頁面效果:

 

 

 

 

 

如何實現:

1:分別建立SiderMenu和SubMenu組件

2、去and-desingn-vue的官方文檔里copy單文件遞歸菜單的代碼https://www.antdv.com/components/menu-cn/#components-menu-demo-single-file-recursive-menu

將代碼拷貝到SiderMenu組件中。

3、將https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue里的代碼拷貝進SubMenu組件中

4、事先確定好了路由以及數據格式。

5、在siderMenu中定義好遍歷路由的方法(通過遞歸以及字段的驗證來返回需要顯示的菜單與其下的所有子菜單)

 

 

 

SiderMenu的Templete:

 

 

SubMenu的截圖:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM