Java教程

后台管理系统--4.侧边菜单栏

本文主要是介绍后台管理系统--4.侧边菜单栏,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、页面整体布局

  使用el-container布局容器,这里重点在样式上。

二、菜单栏制作

2.1目录划分结构 

  如果按照login界面的设计进行目录结构划分--main-cpns,但我们main里面其实有很多组件内容,这种是不适合的。

 2.2侧边菜单栏标题制作

 

 2.3侧边栏菜单内容制作

  使用el-menu组件(类似于el-sub-menu,el-menu都是可以展开的,而el-sub-item是不可以展开的)。我们这里要对userMenus进行展示,查看知这是一个数组,可以采用template遍历的方式展示。

2.3.1拿到userMenus数据

  可以通过$store.state.login.userMenus拿到login模块的数据,但这种做法不好。

 

   更好的方法是用一个计算属性,但是你会发现直接写state没有类型现在。那怎么办?我不用vuex默认的useStore,我自己在store-inex.ts中导出一个useStore(其实就是把vuex的useStore重新封装了一下,加了一些类型限制)

 

 

 

 

 

 2.3.2数据展示

  根据接口文档分析,当type==1,可以展开的菜单,type==2,不可以展开的菜单,使用template模板进行if判断。

  • 首先来看一下示例:

 

  •  我也用了index,其他结构完全符合要求,但是无论点击哪一个就全部展开或全部关闭

 

  •  但是后面页面正常了,却报了特别多的警告。这是因为要求我们传入index是一个字符串类型,但我们的id是number类型,可以通过item.id + ''转为字符串。就没有警告啦!
  • 另外图表不能通过遍历引入了!

 

这篇关于后台管理系统--4.侧边菜单栏的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!