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

技术后台管理系统--4.侧边菜单栏 后台管理系统--4.侧边菜单栏一、页面整体布局使用el-container布局容器,这里重点在样式上。
二、菜单栏制作
2.1目录划分结构 如果按照login界面的设

后台管理系统-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

(0)

相关推荐

  • 黑色上衣配什么颜色的裤子好看,黑色上衣配什么颜色裤子好看

    技术黑色上衣配什么颜色的裤子好看,黑色上衣配什么颜色裤子好看虽然已经是夏天,天气炎热,但是还是有很多人喜欢穿黑色,如果说黑色的裤子倒还是百搭的如果是上衣应该怎么搭配呢黑色上衣配什么颜色的裤子好看?男装黑色上衣大多会搭配牛

    生活 2021年10月21日
  • 怎么实现提示用户退出程序

    技术怎么实现提示用户退出程序这篇文章主要讲解了“怎么实现提示用户退出程序”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么实现提示用户退出程序”吧!青铜级别# 青铜 im

    攻略 2021年10月22日
  • jquery sibling是什么

    技术jquery sibling是什么这篇文章主要讲解了“jquery sibling是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery sibling是什

    攻略 2021年11月15日
  • HDFS集群NameNode节点元数据占用内存计算的示例分析

    技术HDFS集群NameNode节点元数据占用内存计算的示例分析这篇文章将为大家详细讲解有关HDFS集群NameNode节点元数据占用内存计算的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后

    攻略 2021年12月9日
  • css中如何去掉i的斜体样式

    技术css中如何去掉i的斜体样式本篇内容主要讲解“css中如何去掉i的斜体样式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css中如何去掉i的斜体样式”吧!

    攻略 2021年11月11日
  • Java中如何使用Iterator和Iterable接口

    技术Java中如何使用Iterator和Iterable接口这篇文章主要介绍“Java中如何使用Iterator和Iterable接口”,在日常操作中,相信很多人在Java中如何使用Iterator和Iterable接口

    2021年11月17日