后台管理系统-4。侧面菜单栏
一、页面整体布局
使用el-container来布局容器，重点是样式。
二、菜单栏制作
2.1目录划分结构
如果按照登录界面- main-cpns的设计来划分目录结构，但是我们的main里面有很多组件内容，这是不适合的。
2.2侧边菜单栏标题制作
2.3侧边栏菜单内容制作
使用el菜单组件(类似于el子菜单，el菜单可以展开，但el子项目不能展开)。我们将在这里显示用户菜单，我们知道这是一个数组，可以用template遍历.的方式显示
2.3.1拿到userMenus数据
你可以通过$store.state.login.userMenus,获得登录模块的数据，但这并不好。
更好的方法是使用计算属性，但是你会发现直接写状态现在没有类型了。我该怎么办？我不使用vuex的默认useStore。我在store-inex.ts中导出了一个useStore(实际上，我用一些类型限制重新打包了vuex的useStore)
2.3.2数据展示
根据界面文档的分析，当type=1时，可以展开的菜单，type=2时，不能展开的菜单，使用模板模板进行if判断。
让我们先看看这个例子：
我也用了index，其他结构完全符合要求，但是不管点击哪一个，都会全部展开或者全部关闭。
但是后面的页面很正常，但是有很多警告。这是因为我们需要以字符串类型传入索引，但是我们的id是数字类型，可以逐项转换成字符串，id ‘ ‘没有警告！
另外，不能通过遍历引入图表！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/145048.html