vue element NavMenu 左侧导航栏

最新推荐文章于 2024-08-11 17:33:21 发布
最新推荐文章于 2024-08-11 17:33:21 发布
阅读量3.1k 收藏
点赞数
分类专栏： vue.js
原文链接：https://blog.csdn.net/qq_42076140/article/details/83588766
版权

子组件: leftMenu.vue

<template>
  <div>
    <!-- 根据实际情况做修改 -->

    <el-submenu
      v-for="item in navlist"
      :key="item.adminMenu.id + '1'"
      v-show="item.adminMenu.menuType=='list'"
      :index="item.adminMenu.code"
    >
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{item.adminMenu.menuName}}</span>
      </template>
      <NavMenu :navlist="item.children"></NavMenu>
    </el-submenu>

    <el-menu-item
      v-for="item in navlist"
      :key="item.adminMenu.id + '2'"
      v-show="item.adminMenu.menuType=='page'"
      :index="item.adminMenu.url"
    >
      <i class="el-icon-location"></i>
      <span>{{item.adminMenu.menuName}}</span>
    </el-menu-item>
  </div>
</template>
 
<script>
export default {
  name: "NavMenu",
  props: ["navlist"],
  data() {
    return {
     
    };
  },
  methods: {}
};
</script>
<style lang='scss' >
//如果没有此样式的话  折叠有子级菜单的父菜单文字是不会隐藏的
.el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-submenu .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
.el-menu{
  width: 200px;
   .el-submenu__icon-arrow{
    opacity: 1;
  }
}
.el-menu--collapse{
  width: 60px!important;
  .el-submenu__icon-arrow{
    opacity: 0;
  }
}
</style>

父组件： index.

 <template>
     <el-menu style="text-align:left" default-active="2" class="el-menu-vertical-demo"  :collapse-transition="true"   background-color="#222D32" text-color="#fff" 
    
        :unique-opened="true" router active-text-color="#ffd04b">
         
                  <NavMenu :navlist="navlist"></NavMenu>
        </el-menu>
        
        </template>
        
        <script>
       import NavMenu from "@/components/leftMenu/leftMenu";
          export default {
            components: {
              NavMenu
            },
            data() {
		        return {
		          avatar: require("../../../../assets/img/avatar.jpg"),
		          navlist: [
		            {
		              adminMenu: {
		                id: 70,
		                menuName: "客户管理",
		                menuType: "page",
		                pid: "0",
		                url: "/customer",
		                icon: null,
		                sort: 1,
		                deep: 1,
		                code: "customer.user.view",
		                resource: "customer.user.view"
		              },
		              children: []
		            },
		            {
		              adminMenu: {
		                id: 99,
		                menuName: "统计报表",
		                menuType: "list",
		                pid: "0",
		                url: "#",
		                icon: null,
		                sort: 7,
		                deep: 1,
		                code: "statistics",
		                resource: "statistics"
		              },
		              children: [
		                {
		                  adminMenu: {
		                    id: 109,
		                    menuName: "产品运营总览中心",
		                    menuType: "page",
		                    pid: "99",
		                    url: "/statistics/core",
		                    icon: null,
		                    sort: 1,
		                    deep: 2,
		                    code: "statistics.core",
		                    resource: "statistics.core"
		                  },
		                  children: []
		                },
		                {
		                  adminMenu: {
		                    id: 123,
		                    menuName: "运营报表",
		                    menuType: "list",
		                    pid: "99",
		                    url: "#",
		                    icon: null,
		                    sort: 2,
		                    deep: 2,
		                    code: "statistics.yyyw",
		                    resource: "statistics.yyyw"
		                  },
		                  children: [
		                    {
		                      adminMenu: {
		                        id: 124,
		                        menuName: "运营业务报表",
		                        menuType: "page",
		                        pid: "123",
		                        url: "/tjbb/Operaional",
		                        icon: null,
		                        sort: 5,
		                        deep: 3,
		                        code: "statistics.yunying",
		                        resource: "statistics.yunying"
		                      },
		                      children: []
		                    }
		                  ]
		                },
		                {
		                  adminMenu: {
		                    id: 115,
		                    menuName: "贷后管理报表",
		                    menuType: "list",
		                    pid: "99",
		                    url: "#",
		                    icon: null,
		                    sort: 3,
		                    deep: 2,
		                    code: "poi",
		                    resource: "poi"
		                  },
		                  children: [
		                    {
		                      adminMenu: {
		                        id: 116,
		                        menuName: "风险总览样表",
		                        menuType: "page",
		                        pid: "115",
		                        url: "/tjbb/riskbb",
		                        icon: null,
		                        sort: 1,
		                        deep: 3,
		                        code: "statistics.risk",
		                        resource: "statistics.risk"
		                      },
		                      children: []
		                    },
		                    {
		                      adminMenu: {
		                        id: 117,
		                        menuName: "催收报表",
		                        menuType: "page",
		                        pid: "115",
		                        url: "/tjbb/csbb",
		                        icon: null,
		                        sort: 2,
		                        deep: 3,
		                        code: "statistics.dun",
		                        resource: "statistics.dun"
		                      },
		                      children: []
		                    },
		                    {
		                      adminMenu: {
		                        id: 118,
		                        menuName: "首贷续贷入催率和回收率",
		                        menuType: "page",
		                        pid: "115",
		                        url: "/tjbb/jinandchu",
		                        icon: null,
		                        sort: 4,
		                        deep: 3,
		                        code: "statistics.poi",
		                        resource: "statistics.poi"
		                      },
		                      children: []
		                    },
		                    {
		                      adminMenu: {
		                        id: 119,
		                        menuName: "7日内提前还款报表",
		                        menuType: "page",
		                        pid: "115",
		                        url: "/tjbb/day7",
		                        icon: null,
		                        sort: 5,
		                        deep: 3,
		                        code: "statistics.poi.seven",
		                        resource: "statistics.poi.seven"
		                      },
		                      children: []
		                    }
		                  ]
		                },
		                {
		                  adminMenu: {
		                    id: 110,
		                    menuName: "第三方统计",
		                    menuType: "list",
		                    pid: "99",
		                    url: "#",
		                    icon: null,
		                    sort: 4,
		                    deep: 2,
		                    code: "statistics.third",
		                    resource: "statistics.third"
		                  },
		                  children: [
		                    {
		                      adminMenu: {
		                        id: 111,
		                        menuName: "Advance AI",
		                        menuType: "page",
		                        pid: "110",
		                        url: "/statistics/third",
		                        icon: null,
		                        sort: 1,
		                        deep: 3,
		                        code: "statistics.third.advanceai",
		                        resource: "statistics.third.advanceai"
		                      },
		                      children: []
		                    }
		                  ]
		                },
		                {
		                  adminMenu: {
		                    id: 100,
		                    menuName: "渠道数据",
		                    menuType: "page",
		                    pid: "99",
		                    url: "/statistics/channel",
		                    icon: null,
		                    sort: 5,
		                    deep: 2,
		                    code: "statistics.channel",
		                    resource: "statistics.channel"
		                  },
		                  children: []
		                }
		              ]
		            }
		          ]
		        };
		      },
          }
        </script>
       
        <style lang="scss" scoped>
         	    .el-menu {
			      border: none;
			    }
			    .el-menu-vertical-demo:not(.el-menu--collapse) {
			      width: 218px;
			      min-height: 600px;
			    }
			    .el-menu-vertical-demo {
			      width: 35px;
			    }
			    .el-submenu .el-menu-item {
			      min-width: 218px;
			    }
			    .hiddenDropdown,
			    .hiddenDropname {
			      display: none;
			    }
          </style>

转载: https://blog.csdn.net/qq_42076140/article/details/83588766

路不在自己脚下
关注
专栏目录
记一次vue--NavMenu--左侧导航栏动画效果折腾记
郝峰vip的博客
12-06 1056
前沿 小编最近在做公司的后台管理项目中，使用到element-ui作框架，其中使用到element-ui的navbar左侧菜单栏导航，发现有一些需求是其不能满足的，于是乎痛定思痛就自己动手搞了一个，过程中发现自己的不足之处，遂记录下来，毕竟好记性不如烂笔头吗？ 声明 本效果在实现过程中操作了dom，这是令小编头疼的地方，但是苦于现在没有找到好的解决办法，所以暂时先拿这个上项目了，(时间紧迫，项...
VUE-Element组件（二）NavMenu导航菜单
热门推荐
w_t_y_y的博客
04-09 1万+
navmenu组件
el-menu导航菜单右侧的下拉图标消失/自定义icon
m0_71266141的博客
09-02 3082
el-menu组件发现自带的el-icon-arrow-down无法显示
Element UI左侧导航栏写法（递归组件实现）
最新发布
m0_62626838的博客
08-11 271
1、左侧导航栏组件使用的是Element Ui的导航栏组件，思路：首先判断导航栏数据是否存在children，以此来实现一级菜单与多级菜单的渲染，然后使用递归组件实现多级菜单的子菜单渲染，注意使用递归组件需将菜单栏数据在父组件中从vuex中获取，再通过props传递给子组件，否则会陷入无限递归。
一个vue底部导航栏组件
michaelxuzhi___的博客
05-02 2261
写一个底部导航栏独立组件，便于以后项目中的使用 分为创建和封装两步 需求：独立、图标可改、名称可改、flex布局 ①分析：首先是TabBar TabBar是导航栏的主框架，包裹整个导航栏 创建tabbar -> Tabbar.vue <template> <div id="tab-bar"> // 这里啥都没有 </div&gt...
通过自定义组件学习Vue系列（四）【导航菜单】（附源码）
gdgztt的专栏
04-03 530
整一下 flex 常用的样式类，用途：一般用于后台管理系统的导航菜单，附源码，有兴趣的朋友可以参考自行修改。1、flex布局，用好flex，能够解决布局的大部分问题。2、鼠标经过改变子元素样式。3、鼠标经过改变父元素样式。4、动态修改class。5、css画三角形
侧边导航栏 通用样式
weixin_45646663的博客
09-06 777
<ul class="left-nav"> <li v-for="(link,index) in nav"> <router-link :to="link.path" exact v-if="index===1"> <el-popover content="入院48小时内" trigger="hover"> <template slot="reference
vue Element-ui el-menu 左侧导航条
weixin_30436891的博客
09-07 1538
<template> <!--实现左侧导航条动态渲染(三级)--> <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router unique-opened background-color="#545c64" ...
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
NavMenu是Element-UI中的一个核心组件，用于创建导航菜单，可以支持水平和垂直两种模式，适用于各种类型的应用场景。 ### 基础用法 1. **水平导航菜单**： 在水平模式下，`el-menu`组件可以通过`:default-active`...
vue elementUI使用tabs与导航栏联动
10-16
本文将探讨如何使用Vue.js结合Element UI来实现一个导航栏与tabs组件的联动。 首先，我们需要了解Element UI中的几个关键组件： - `el-menu`：用于构建侧边栏导航菜单。 - `el-submenu`：表示菜单中的一个子菜单，...
el-menu实现左侧菜单栏
weixin_43724230的博客
03-13 3351
el-menu实现左侧菜单栏 开启菜单栏路由模式 设置属性 router router属性的默认值是false，设置的时候可以直接添加就好 或者绑定属性，把值设为true： 注意需要绑定，前面加 “:” :router=“true” <el-menu router></el-menu> <el-menu :router="true"></el-menu&...
Element 的导航菜单(侧边)出现不对齐的问题
weixin_44588893的博客
01-19 4193
Element 的导航菜单(侧边)出现不对齐的问题 解决方法 在<el-menu></el-menu>下面的标签上加一个外框线 代码 <div class="over-menu" v-if="open!=true"> <el-menu style="outline: none;" :default-active="meni_active +''" class="el-menu-vertical-demo"
element-ui组件 el-menu导航菜单边缘不对齐
qq_44886882的博客
08-27 2693
记录element-ui组件中el-menu导航菜单使用中遇到的边缘不对齐的问题以及解决思路和办法。
如何修改element-ui中折叠面板右侧的图标
亚洲的博客
04-12 5940
<el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="一致性 Consistency" name="1"> <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div> <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div&
Vue导航栏侧边不对齐问题解决
weixin_45138601的博客
06-05 1322
可以看到侧边明显没对齐 解决办法： 首先设置lang为less。 <style lang="less" scoped> 如果设置之后项目报错的话， Can't resolve 'less-loader' 需要先安装less和less-loader依赖。 如果安装之后还是报错的话，说明版本不兼容，所以需要降低版本。 npm uninstall less-loader npm install less-loader@5.0.0 一切正常之后，对导航栏进行样式设计。 ...
Vue_shop学习28：左侧菜单优化
weixin_47295886的博客
04-18 230
原因在于el-menu有个border-right属性=1改成0。当选中时候，一级菜单有部分没有对齐。同一时间，展开一个一级菜单（）
Vue3+Element-Plus 主页Aside布局设计 二四
build2024
12-05 7028
1.左侧菜单布局设计效果 2. 左侧菜单布局分析 菜单分为两级，并且有折叠效果 3.用到的菜单组件(Meun)介绍 Menu 菜单 | Element Plus (gitee.io) el-menu 整个左侧菜单最外层必须使用menu 包裹着 el-submenu 一级菜单组件 el-icon 菜单图标项 span 菜单的文本 el-menu-item 二级菜单组件 <!-- 侧边栏菜单区域 --> <el-men...
菜单Menu显示三个点,不显示布局内容
weixin_30408165的博客
12-19 1284
先说下menu的使用 首先自定义一个menu选项 <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/t...
vue3左侧导航栏动效
07-29
- *2* [记一次vue--NavMenu--左侧导航栏动画效果折腾记](https://blog.csdn.net/ww_5211314/article/details/103425950)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值