后台管理系统--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.侧边菜单栏的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！