基于自建json数据的动态侧边菜单栏
后端接口json数据
src/api/menuList.js
const menuList = [
{
url: '',
name: '人员管理',
icon: 'icon-renyuan',
menuId: 1,
children: [
{
url: '/user',
name: '用户管理',
icon: 'icon-jurassic_user',
menuId: 1001,
children: []
},
{
url: '/role',
name: '角色管理',
icon: 'icon-jiaose',
menuId: 1002,
children: []
}
]
},
{
url: '/device',
name: '设备管理',
icon: 'icon-shebei',
menuId: 2
}
]
export default menuList;
home.vue页面上面显示该类型的菜单
在home.vue页面中import 这个文件
遍历数组中的menulist 中的json数据,因为只遍历到第二层 因此只支持两层目录 即父-子
<template>
<div class="common-layout">
<--! 基于elementplus的侧边栏标签-->
<el-aside width="400px">
<el-row class="tac">
<el-col :span="12">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
:router="true"
>
<el-sub-menu index="1" v-for="item in menuList" :key="item.id">
<!--一级模板区域 -->
<template #title>
<el-icon class="item.iconCls"/>
<span>{{ item.name}}</span>
</template>
<el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="item.id">
<template #title>
<span>{{subItem.name}}</span>
</template>
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-col>
</el-row>
</el-aside>
</el-container>
</el-container>
</div>
</template>
<script>
import menuList from "@/api/mockdata/menList"; //根据自己的路径来
export default {
name: "Home",
data(){
return {
menuList
}
},
}
</script>
<style >
</style>
效果图
基于后端接口数据 实现动态侧边菜单栏 vue3+elementplus
后端菜单接口数据
目录结构为 父目录 系统管理 子目录 广告管理 APP上传。 遍历json数据 在v-for页面显示 name 名称
http://localhost:8000/api/menu
[
{
"id": 6,
"url": "/",
"path": "/home",
"component": "Home",
"name": "系统管理",
"iconCls": "fa fa-windows",
"enabled": true,
"children": [
{
"id": 30,
"url": null,
"path": "/sys/ad",
"component": "SysAd",
"name": "广告管理",
"iconCls": "fa fa-ad",
"meta": null,
"parentId": 6,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 7,
"url": null,
"path": "/sys/app",
"component": "SysApp",
"name": "App上传",
"iconCls": "fa-solid fa-circle-arrow-up",
"meta": null,
"parentId": 6,
"enabled": true,
"children": null,
"roles": null
}
],
"roles": null
}
]
在 home.vue中 显示此json数据形成的菜单
vue3包含的data() mounted() methods() 方法被一个 setup方法全包了
ref可以是对象也可以是变量 reactive中必须是对象。。
ref使用变量 不管是获取还是使用 都需要加上 .value
<template>
<div class="common-layout">
<el-container>
<el-aside width="400px">
<el-row class="tac">
<el-col :span="12">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
:router="true"
>
<el-sub-menu index="1" v-for="item in menuList" :key="item.id">
<!--一级模板区域 -->
<template #title>
<el-icon class="item.iconCls"/>
<span>{{ item.name}}</span>
</template>
<!-- 二级目录遍历 json中的children 显示name:中的内容-->
<el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="item.id">
<template #title>
<span>{{subItem.name}}</span>
</template>
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-col>
</el-row>
</el-aside>
</el-container>
</el-container>
</div>
</template>
<script>
import { Document, Location, Setting, Burger} from "@element-plus/icons-vue";
import axios from "axios";
import {onMounted,ref } from 'vue'
import {useStore} from "vuex";
export default {
name: "Home",
components: {Burger, Setting, Document, Location},
setup() {
// vue3推荐使用ref 实现响应式数据 数据实时显示 将后端接受的数据赋值给ref
const menuList = ref();
onMounted(()=>{
axios.get("/api/menu").then(res =>{
console.log("onMounted")
const data = res.data
console.log(data)
menuList.value = data
})
})
return {
menuList
}
},
}
</script>
<style >
.homeHeader{
background-color: #04befe;
/*弹性展示*/
display: flex;
/* 居中对齐弹性盒子的各项 div 元素*/
align-items: center;
}
.mainTitle{
/* 规定元素中文本的水平对齐方式 居中*/
text-align: center;
/* 颜色为深空色*/
color: deepskyblue;
/* 字体大小*/
font-size: 30px;
/* 距离顶部的距离为 20px 数值越大下降位置越多*/
//padding-top: 20px;
}
.headerTitle{
/*字体大小*/
font-size: 20px;
/* 字体颜色*/
color: #fffff9;
}
//标签换行样式 vue3中不支持标签页换行
.text-wrapper {
display: inline-block;
word-break: break-all;
word-wrap: break-word
}
</style>
效果图