vue中element UI可折叠式导航菜单(导航列表根据后台数据渲染-动态加载导航菜单)

最新推荐文章于 2024-07-29 15:15:19 发布
置顶 最新推荐文章于 2024-07-29 15:15:19 发布
阅读量2.5w 收藏 24
点赞数
分类专栏： vue elementUI 文章标签： element UI可折叠式导航菜单 权限菜单 导航菜单根据后台数据渲染
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bamboozjy/article/details/84070564
版权

版本一：可折叠式，数据前台自定义

<template>
  <div id="index">
	<el-aside width="152px" class="asideNav">
		<el-menu
			:default-active="defaultActive"
			class="el-menu-vertical"
			router
			unique-opened
			:collapse="iscollapse"
			:collapse-transition="false"
			active-text-color='#29A88D'
			background-color="#272D34"
			text-color="#fff"
			@open="handleOpen"
			@close="handleClose">
			<div id="logo" index="/index">
				<img src="../assets/img/logo.png" class="logo">
                <span class="tohide">XXXXXXXX</span>
			</div>

			<el-menu-item index="/index/home">
				<i class="icon iconfont icon-home"></i>
				<span slot="title">总览</span>
			</el-menu-item>

			<el-menu-item index="/index/plate">
				<i class="icon iconfont icon-iconsp1"></i>
				<span slot="title">版块管理</span>
			</el-menu-item>

			<el-submenu index="/index/activity">
				<template slot="title">
					<i class="icon iconfont icon-shangpinshengou"></i>
					<span>活动管理</span>
				</template>
				<el-menu-item index="/index/activity">
					<i class="icon iconfont icon-dian"></i>
					<span>活动管理</span>
				</el-menu-item>
				<el-menu-item index="/index/classify">
					<i class="icon iconfont icon-dian"></i>
					<span>分类管理</span>
				</el-menu-item>
			</el-submenu>

            <el-submenu index="/index/goods">
				<template slot="title">
					<i class="icon iconfont icon-shangpinliebiao"></i>
					<span>商品管理</span>
				</template>
				<el-menu-item index="/index/goods">
					<i class="icon iconfont icon-dian"></i>
					<span>商品管理</span>
				</el-menu-item>
				<el-menu-item index="/index/sort">
					<i class="icon iconfont icon-dian"></i>
					<span>分类管理</span>
				</el-menu-item>
				<el-menu-item index="/index/freight">
					<i class="icon iconfont icon-dian"></i>
					<span>运费管理</span>
				</el-menu-item>
			</el-submenu>

		</el-menu>
		<div class="iscollapse" @click="setcollapse">
			<i class="el-icon-arrow-right" v-if="iscollapse"></i>
			<i class="el-icon-arrow-left" v-else></i>
		</div>
	</el-aside>
	<div class="rightContainer">
		<el-header class="header">
			XXX
		</el-header>
		<el-main>
			<router-view></router-view>
		</el-main>
		<div class="foot">
			XXX
		</div>
	</div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "index",
  data() {
    return {
      defaultActive: "/index/home",
      iscollapse: false,
      logourl: require("../assets/img/logo.jpg"),
      username: null,
      show: false
    };
  },
  methods: {
    setcollapse() {
      this.iscollapse = !this.iscollapse;
      if (this.iscollapse) {
        $("#logo").css("width", "64px");
        $(".el-aside").css("width", "auto");
        $(".tohide").css("display", "none");
      } else {
        $("#logo").css("width", "auto");
        $(".el-aside").css("width", "152px");
        $(".tohide").css("display", "inline");
      }
    }
  },
  mounted() {}
};
</script>

<style scoped>
/* 侧边栏 */
#index {
  display: flex;
}
.el-aside {
  background: #272d34;
  height: 100vh;
  /* position: relative; */
}
.el-menu-vertical {
  border-right: 0;
}
.el-submenu .el-menu-item {
  min-width: 150px;
}
.el-menu-vertical i {
  color: #fff !important;
  font-size: 14px !important;
}
.is-active {
  background: #1890ff !important;
  color: #fff !important;
}
#logo {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  background: #272d34;
  color: #fff;
  overflow: hidden;
}
.logo {
  width: 22px;
  display: block;
  margin: 0 10px 0 20px;
}
.iscollapse {
  background: #283644;
  color: #fff;
  width: 100%;
  height: 50px;
  padding-top: 8px;
  text-align: center;
}
.el-aside .iscollapse i {
  font-size: 40px !important;
}
/* .tac::-webkit-scrollbar {
  display: none;
} */
#index .rightContainer {
  height: 100vh;
  overflow: auto;
  flex: 1;
  /* display: flex;
  flex-direction: column; */
}
/* 右边头部 */
.el-header {
  height: 50px !important;
  background: #fff !important;
  padding: 0 !important;
  line-height: 50px;
}
.header ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-bottom: 1px solid #e5e6e7;
}
.header li {
  padding: 0 8px;
  cursor: pointer;
  position: relative;
}
.header .lines {
  font-weight: 900;
  color: #dfdfdf;
}
.header .help span {
  color: #2477e7;
}
.header .operate {
  height: 50px;
  padding-right: 20px;
}
.header .prove {
  /* display: none; */
  width: 100px;
  position: absolute;
  z-index: 999;
  top: 50px;
  right: 0px;
  left: 0;
  padding: 5px 0px;
  margin: auto;
  background: #fff;
  color: #999;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 0 3px 0 #ccc;
}
.header .prove p {
  line-height: 30px;
  padding: 0px 10px;
}
.header .prove p:hover {
  background: rgba(24, 144, 255, 0.1);
}
.header i {
  color: #2477e7;
}
.header .user i {
  margin-left: 10px;
}
.header .prove i {
  color: #999;
  margin-right: 5px;
}
.header .user {
  display: flex;
  align-items: center;
}
.header .operate span {
  color: #333;
  display: block;
  min-width: 50px;
}
.header img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

/* 右边主体部分 */
.el-main {
  padding: 0 !important;
  background: #f7f7f7;
}
/* 右边底部 */
.foot {
  text-align: center;
  font-size: 12px;
  padding: 15px;
  /* height: 80px !important; */
  color: #999;
  background: #f7f7f7;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.foot span {
  line-height: 22px;
  transform: scale(0.83);
}
</style>

需求改变：导航数据要从后台获取再渲染

版本二：可折叠式，动态加载，数据后台获取并渲染（css同上）

<template>
  <div id="index">
	<el-aside width="152px" class="asideNav">
		<el-menu
			:default-active="defaultActive"
			class="el-menu-vertical"
			router
			unique-opened
			:collapse="iscollapse"
			:collapse-transition="false"
			active-text-color='#29A88D'
			background-color="#272D34"
			text-color="#fff"
			@open="handleOpen"
			@close="handleClose">
			<div id="logo" index="/index">
				<img src="../assets/img/logo.png" class="logo">
                <span class="tohide">XXXXXXXX</span>
			</div>

			<div v-for="(item,i) in routers" :key="i">
                  <el-submenu :index="item.newcondition" v-if="item.child">
                    <template slot="title">
                      <i :class="item.newicon"></i>
                      <span class="tohide">{{item.title}}</span>
                    </template>
                    <el-menu-item :index="val.newcondition" v-for="val in item.child" :key="val.title">
                        <i class="icon iconfont">*</i>
                        <span>{{val.title}}</span>
                    </el-menu-item>
                  </el-submenu>
                  <el-menu-item :index="item.newcondition" v-else > 
                      <i :class="item.newicon"></i>
                      <span slot="title">{{item.title}}</span>
                  </el-menu-item>
                </div>

		</el-menu>
		<div class="iscollapse" @click="setcollapse">
			<i class="el-icon-arrow-right" v-if="iscollapse"></i>
			<i class="el-icon-arrow-left" v-else></i>
		</div>
	</el-aside>
	<div class="rightContainer">
		<el-header class="header">
			XXX
		</el-header>
		<el-main>
			<router-view></router-view>
		</el-main>
		<div class="foot">
			XXX
		</div>
	</div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "index",
  data() {
    return {
      defaultActive: "/index/home",
      iscollapse: false,
      logourl: require("../assets/img/logo.jpg"),
      username: null,
      show: false,
      routers: []
    };
  },
  methods: {
    setcollapse() {
      this.iscollapse = !this.iscollapse;
      this.$nextTick(() => {
        if (this.iscollapse) {
          $("#logo").css("width", "64px");
          $(".el-aside").css("width", "auto");
          $(".tohide,.el-submenu__title .el-icon-arrow-right").css(
            "display",
            "none"
          );
        } else {
          $("#logo").css("width", "auto");
          $(".el-aside").css("width", "152px");
          $(".tohide,.el-submenu__title .el-icon-arrow-right").css(
            "display",
            "inline"
          );
        }
      });
    }
  },
  mounted() {
    this.$http
      .post(this.$api.getmenulist, { shop_code: this.$store.state.shop_code })
      .then(res => {
        console.log(res.data);
        let data = res.data;
        if (data.code == 200 && data.result.length > 0) {
          this.routers = data.result;
        }
      })
      .catch(error => {
        this.$message.error(error);
      });
  }
};
</script>

 

竹子js
关注
  • 0
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端学习（2438）：显示文章列表
歌谣的博客
10-13 307
app.vue <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style lang="less"> </style> index.vue <template> &...
vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
热门推荐
前端技术的学习整理
05-22 3万+
表头主要复杂在：1，有三层，一层是大类，第二层是具体项，第三层是标准值/对比值2，首列和末尾列是一层3，整个表格的维度是根据数据的输入自己生成，也就是动态的下面是在 vue + eleUI 中的解决方案：&lt;el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading"...
vue中element UI可折叠式导航菜单
xumengxia的博客
07-02 1976
效果图： 代码： <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <linkrel="stylesheet"href="https://unpkg.com/element-ui/l...
基于vue+elementPlus的动态导航标签栏-tabs
最新发布
qq_65325528的博客
07-29 862
首先用到了element-plus框架中tabs的组件，然后数据我这里是通过vuex来维护的。在点击菜单的同时往vuex相关数据数组中添加一项数据即可， 不使用setup语法糖时 使用setup语法糖时
使用vuetify实现导航菜单
Cheryl的加工厂
03-31 2350
菜单项 menu: [ { index: "1", title: "首页" }, { index: "2", title: "博客", submenu: [{ itemIndex: "2-1", itemTitle: "消息" }], }, { index: "3", title: "程序员学院", }, { .
Vuetify——v-navigation-drawer导航抽屉
月来better
08-21 1144
<template> <v-sheet height="400" class="overflow-hidden" style="position: relative;" > <v-container class="fill-height"> <v-row align="center" justify="center" > <v-btn
vuetify学习第四天-典型导航菜单实现
gaogzhen的博客
01-07 1万+
典型导航菜单实现 效果示例@1-1： 布局 主要所用vuetify组件： v-navigation-drawer：导航菜单 v-toolbar：工具栏 v-divider: 分割线 v-list: 菜单列表项 源代码@1-1： <template> <v-navigation-drawer> <v-toolbar> ... ...
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
4. **菜单渲染**：Element-Plus中的Menu组件可以用来创建可折叠、多级的导航菜单，根据获取的数据动态生成菜单结构。 5. **状态管理**：Vuex可以帮助管理全局状态，包括当前选中的菜单、展开的子菜单等。 6. **...
VUE + element实现横向及纵向拓展
11-03
在本文中，我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个具有横向和纵向拓展功能的表格。Element UI是基于Vue.js的组件库，提供了丰富的UI元素，包括我们在此场景中需要用到的表格（Table）组件。我们...
java入职学习六之前端UI（element-ui,ant-design-vue）
Yzq12312的博客
12-12 834
一、element-ui 1.简介 element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。 其设计原则为： 一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 反馈 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作； 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。 效率
vue通用后台管理系统（保姆级）--持续更新中_vue管理后台
2401_84446882的博客
04-27 1667
路由出口路由匹配到的组件将渲染在这里。
Vuetify——使用v-navigation-drawer组件
月来better
05-17 1609
v-navigation-drawer 是您的用户用于导航应用程序的组件。 导航抽屉被预先配置为可以在有或没有 vue-router 的情况下使用。 为了显示的目的，一些示例被包装在 v-card 元素中。 在您的应用程序中，通常会把 v-navigation-drawer 组件作为 v-app 的直接子组件。 <template> <v-app id="app"> <v-app-bar app elevation="1" lig
记录一下VUE ElementUI 折叠 展开 有效果图
weixin_50900104的博客
09-27 371
想要的效果就是点击这一行然后展开里面的内容 代码参考别人的然后自己再改动了一些=-= <template> <el-form> <div id="progressBar" class="modular"> <div class="switchBar"> <strong>操作记录</strong> <el-button type="text" style="margin-left:10px
Vue开发实例（六）实现左侧菜单导航
Daniel
03-02 3757
使用el-menu实现左侧菜单导航，说明路由的使用方法，实现动态左侧菜单
Vue3+Element-Plus 动态加载主页Aside(左侧)菜单数据 二五
build2024
12-06 5373
1. 通过接口动态获取左侧菜单数据 1.1 获取接口前的注意事项 1. 按照接口文档要求，除了登录接口外，需要授权的API必须要在请求头中使用Authorization 字段提供 token 令牌 意思是说，访问接口必须得到服务器授权才能正常调用。 2. 如何获取服务器的授权认证。 前面章节已经讲过，登录成功后。服务器端会返回一个登录成功后的（ token）令牌，这个token 令牌就是权限认证的字段 （Authorization） 所以在请求一些授权API时，必须在请求头中使用（...
Vue.js结合Element-UI递归实现多级导航菜单动态加载
ssjdoudou的博客
12-10 1540
主要参考https://blog.csdn.net/gnosed/article/details/105178518 Menu.Vue 在需要加载导航的地方调用该组件： <el-menu > <navigation-item v-for="(menu,i) in List" :key="i" :item="menu"/> </el-menu> 完整代码： <template> <div> <el-aside.
vuetify 导航栏 breakdown 自存
weixin_48419976的博客
02-12 148
在栅格系统设置 no gutter 以及 pa-0取消所有空格 导航栏上写上标签 设置小屏，hidden-xs-only只有在extra small的时候隐藏 这是就看不到那几个图标了 小屏隐藏之后 我们写一个 按钮隐藏显示下拉菜单 它是放在外面 的navigation bar里面的组件
Vuetifyjs问题一：在使用 v-bottom-navigation 底部导航栏的时候出现大量空白空间
Hawking的博客
04-12 805
今天在使用 Vuetifyjs的v-bottom-navigation的时候出现的状况如图： 然后这个时候你可以在浏览器上尝试去找一下他的元素。发现他指向的是一个 class：.v-application--wrap 的 div。 到这里就好解决了，我们只需要给他加上 min-height 就可以啦。但是这个原因还是不是很明白，没看到这个是怎么产生的，可能是组件里面的原因吧。 解决办法： 在CSS插入： （我用的是 SCSS，如果CSS的话，那么 !important 应该也可）...
element-ui中如何动态渲染列表
weixin_43925630的博客
09-16 2035
element-ui中如何动态渲染列表 首先在data中定义所有的列数组，数组的每一个是对象，对象中包含列的prop，列的表头名，这个可以随便定义，列的表头名和列所渲染的prop要一一对应，因为动态列会出现的情况就是，后端返回的字段是同一个字段，但是根据不同的情况，回显的列表头名可能不一样。 列数组中还要包含是否回显的字段，这个要根据上述的不同情况去做回显。 固定列可以用el-table-column标签直接包裹 动态渲染列，用template包裹一层，在template上去做渲染，template中包含
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值