标签：el -- menu 侧边 菜单栏 login useStore userMenus

一、页面整体布局

　　使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。