頁面效果:
如何實現:
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的截圖: