权限菜单以一个职场小白的思路实现（基于ELEMENTUI）

最新推荐文章于 2024-06-19 12:02:41 发布

Hkweb_

最新推荐文章于 2024-06-19 12:02:41 发布

阅读量598

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Hkweb_/article/details/82773896

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.第一步先创建一个菜单组件

<template>
	<div>
		<template v-for="list in this.menuList" v-if="list.show">
	        <el-submenu  v-if="list.chiledren.length>0" @click="linkto(list.path)" :key="list.index" :index="list.index"> 
	          	<template slot="title"  style="padding-left:10px" >
		            <i :class="list.icon"></i>
		            <span slot="title" style="padding-left: 20px !important;">{{list.text}}</span>
	          	</template>
	          	<Menu :menuList="list.chiledren"></Menu>
	        </el-submenu>
	        <el-menu-item v-else @click="linkto(list.path)"  :index="list.index"  :key="list.index" >
                <i :class="list.icon"></i>
                <span slot="title" class="titlesMargin" style="padding-left: 20px !important;">{{list.text}}</span>
            </el-menu-item>
	  	</template>
	</div>
</template>

<script>
	export default{
        name:'Menu',//模板名称
        data(){
            return {

            }
        },
        methods:{
        	linkto(links) {
	            this.$router.push({ path: links });
	        }
        },
        mounted(){
        	/*console.log(this.menuList)*/
        },
        beforeMount(){
        },
        props:['menuList']

    }
</script>

<style>
</style>

2.父组件中调用

<Menu :menuList="this.menuList"></Menu>


//数据格式
[
{
		"index":"1",
		"text":"能管在线管理",
		"name":"能管在线管理",
		"icon":"icon iconfont icon-profilesetting",
		"show":false,
		"chiledren":[
			{
				"index":"1-1",
				"text":"用户列表",
				"name":"用户列表",
				"path":"/ngtOnline/userList",
				"chiledren":[],
				"show":false
			},
			{
				"index":"1-2",
				"text":"用户审核",
				"name":"用户审核",
				"path":"/ngtOnline/applyFor",
				"chiledren":[],
				"show":false
			}
		]
	},
]

3.准备工作做好之后下边该讲讲实现思路了

后台通过传入一个权限菜单，对应的【“用户审核”，“用户列表”......】

然后和前台的渲染数据进行比较，如果存在的话则将定义的数据中的改变菜单具体某个子菜单显示隐藏的属性赋值，此处是show属性

思路很简单

methods:{
//因为不确认是几级菜单所以采用递归的方式进行数据比较
changeMenuStatus(menu,munuLists){
        	if(munuLists.indexOf(menu.name)!=-1){
        		menu.show=true;
        	}
        	if(menu.chiledren.length==0)return;
        	menu.chiledren.forEach((m)=>{
        		this.changeMenuStatus(m,munuLists);
        	});
        }
}




mounted(){
    getData("api/user/authentication").then(response=>{
			if(response.data.code==10000){
				let munuLists=[];
				let _this=this;
				munuLists=response.data.data.menuList;
				if(munuLists.length<=0){
					this.$router.push({
						path:"/limits"
					})
				}else{
					_this.menuList.forEach((menu)=>{
						_this.changeMenuStatus(menu,munuLists);
					});
					
				}
			};
			
		})
}

大功告成，有任何疑问请私信，秒也不回！！！