vue 动态多级导航菜单

1，创建vue的左侧导航栏组件<template><div><el-menu-itemv-for="(item,index) in navlist":key="index"v-if="item.adminMenu.menuType =='page'"...

LONGLONGAGO_RU

3170人浏览 · 2019-11-12 13:41:38

LONGLONGAGO_RU · 2019-11-12 13:41:38 发布

1，创建vue的左侧导航栏组件

<template>
  <div>
    <!-- 根据实际情况做修改 -->
    <el-menu-item
      v-for="(item,index) in navlist"
      :key="index"
      v-if="item.adminMenu.menuType =='page'"
      :index="item.adminMenu.path"
    >
      <i class="iconfont zhzyyuandianxiao"></i>
      <span>{{item.adminMenu.menuName}}</span>
    </el-menu-item>
    <el-submenu
      v-for="(item,index) in navlist"
      :key="index"
      v-if="item.adminMenu.menuType =='list'"
      :index="item.adminMenu.code"
    >
      <template slot="title">
        <i class="iconfont zhzyyuandianxiao"></i>
        <span>{{item.adminMenu.menuName}}</span>
      </template>
      <NavMenu :navlist="item.children"></NavMenu>
    </el-submenu>
  </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>

2，引用

 <el-menu
            style="text-align:left"
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            :collapse-transition="true"
            :collapse="isCollapse"
            :unique-opened="true"
            router
          >
            <NavMenu :navlist="navlist"></NavMenu>
          </el-menu>
 
import NavMenu from "./NavMenu";
 
  components: {
    NavMenu
  },
  data(){
	  return{
	   isCollapse:false,
	  }
  }

3,数据列表

[{
	"adminMenu": {
		"id": 70,
		"menuName": "客户管理",
		"menuType": "page",
		"pid": "0",
		"path": "/customer",
		"icon": null,
		"sort": 1,
		"deep": 1,
		"code": "customer.user.view",
		"resource": "customer.user.view"
	},
	"children": []
}, {
	"adminMenu": {
		"id": 99,
		"menuName": "统计报表",
		"menuType": "list",
		"pid": "0",
		"path": "#",
		"icon": null,
		"sort": 7,
		"deep": 1,
		"code": "statistics",
		"resource": "statistics"
	},
	"children": [{
		"adminMenu": {
			"id": 109,
			"menuName": "产品运营总览中心",
			"menuType": "page",
			"pid": "99",
			"path": "/statistics/core",
			"icon": null,
			"sort": 1,
			"deep": 2,
			"code": "statistics.core",
			"resource": "statistics.core"
		},
		"children": []
	}, {
		"adminMenu": {
			"id": 123,
			"menuName": "运营报表",
			"menuType": "list",
			"pid": "99",
			"path": "#",
			"icon": null,
			"sort": 2,
			"deep": 2,
			"code": "statistics.yyyw",
			"resource": "statistics.yyyw"
		},
		"children": [{
			"adminMenu": {
				"id": 124,
				"menuName": "运营业务报表",
				"menuType": "page",
				"pid": "123",
				"path": "/tjbb/Operaional",
				"icon": null,
				"sort": 5,
				"deep": 3,
				"code": "statistics.yunying",
				"resource": "statistics.yunying"
			},
			"children": []
		}]
	}, {
		"adminMenu": {
			"id": 115,
			"menuName": "贷后管理报表",
			"menuType": "list",
			"pid": "99",
			"path": "#",
			"icon": null,
			"sort": 3,
			"deep": 2,
			"code": "poi",
			"resource": "poi"
		},
		"children": [{
			"adminMenu": {
				"id": 116,
				"menuName": "风险总览样表",
				"menuType": "page",
				"pid": "115",
				"path": "/tjbb/riskbb",
				"icon": null,
				"sort": 1,
				"deep": 3,
				"code": "statistics.risk",
				"resource": "statistics.risk"
			},
			"children": []
		}, {
			"adminMenu": {
				"id": 117,
				"menuName": "催收报表",
				"menuType": "page",
				"pid": "115",
				"path": "/tjbb/csbb",
				"icon": null,
				"sort": 2,
				"deep": 3,
				"code": "statistics.dun",
				"resource": "statistics.dun"
			},
			"children": []
		}, {
			"adminMenu": {
				"id": 118,
				"menuName": "首贷续贷入催率和回收率",
				"menuType": "page",
				"pid": "115",
				"path": "/tjbb/jinandchu",
				"icon": null,
				"sort": 4,
				"deep": 3,
				"code": "statistics.poi",
				"resource": "statistics.poi"
			},
			"children": []
		}, {
			"adminMenu": {
				"id": 119,
				"menuName": "7日内提前还款报表",
				"menuType": "page",
				"pid": "115",
				"path": "/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",
			"path": "#",
			"icon": null,
			"sort": 4,
			"deep": 2,
			"code": "statistics.third",
			"resource": "statistics.third"
		},
		"children": [{
			"adminMenu": {
				"id": 111,
				"menuName": "Advance AI",
				"menuType": "page",
				"pid": "110",
				"path": "/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",
			"path": "/statistics/channel",
			"icon": null,
			"sort": 5,
			"deep": 2,
			"code": "statistics.channel",
			"resource": "statistics.channel"
		},
		"children": []
	}]
}]

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^