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

最新推荐文章于 2024-07-29 15:15:19 发布

置顶竹子js

最新推荐文章于 2024-07-29 15:15:19 发布

阅读量2.5w

点赞数

分类专栏： vue elementUI 文章标签： element UI可折叠式导航菜单权限菜单导航菜单根据后台数据渲染

本文链接：https://blog.csdn.net/bamboozjy/article/details/84070564

版权

vue 同时被 2 个专栏收录

71 篇文章 3 订阅

订阅专栏

elementUI

12 篇文章 0 订阅

订阅专栏

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

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