后台管理系统--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 + ''转为字符串。就没有警告啦！
- 另外图表不能通过遍历引入了！
标签：el,--,menu,侧边,菜单栏,login,useStore,userMenus 来源： https://www.cnblogs.com/zzyyyy/p/15685728.html