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

相关推荐

  • MS 2008数据库转换成2000版本的方法是什么

    技术MS 2008数据库转换成2000版本的方法是什么MS 2008数据库转换成2000版本的方法是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。话

    攻略 2021年11月30日
  • Java开发必须要学的软件有哪些

    技术Java开发必须要学的软件有哪些 Java开发必须要学的软件有哪些作为Java初学者,应该学会哪些Java软件开发工具呢这个问题就由千锋重庆Java的小编来为大家解答。
    1.JDK:
    jdk:Jav

    礼包 2021年12月7日
  • pkg安装包制作软件Packages for Mac是怎么样的

    技术pkg安装包制作软件Packages for Mac是怎么样的小编给大家分享一下pkg安装包制作软件Packages for Mac是怎么样的,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读

    攻略 2021年11月18日
  • Kafka的使用与特性怎么理解

    技术Kafka的使用与特性怎么理解这篇文章主要讲解了“Kafka的使用与特性怎么理解”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Kafka的使用与特性怎么理解”吧!1、

    2021年11月26日
  • Stream流

    技术Stream流 Stream流package com.mayikt.stream;import com.mayikt.entity.UserEntity;import java.util.Array

    礼包 2021年11月24日
  • 如何理解微服务架构下的高可用和高性能设计

    技术如何理解微服务架构下的高可用和高性能设计这篇文章主要讲解了“如何理解微服务架构下的高可用和高性能设计”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何理解微服务架构下

    攻略 2021年10月22日