37.(前端)菜单的展示

1.前端的左侧菜单栏展示

对于菜单栏，我们可以从element-ui官网中获取到展示的代码

1.1导入代码

<template>
    <el-container class="home-container">
        <el-header>
            <div>
                <img src="../assets/logo.png">
                <span>电子后台管理系统span>
            div>
            <el-button type="primary" @click="logout">退出el-button>
        el-header>
        <el-container>
            <el-aside width="200px">
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-submenu index="1">
            <template slot="title">
                <i class="el-icon-location">i>
                <span>导航一span>
            template>
            <el-menu-item index="1-4-1">
                <i class="el-icon-location">i>
                    <span>选项1span>
                    el-menu-item>
            el-submenu>
        el-menu>
            el-aside>
            <el-main>Mainel-main>
    el-container>
    el-container>
template>

<script>
export default{
    methods:{
        logout (){
            // 第一步，清除token
            window.sessionStorage.clear()
            // 第二步，跳转到登录页面
            this.$router.push('/login')
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
script>

<style lang="less" scoped>
// 整个组件

.home-container{
    height: 100%;
}
// 界面顶
.el-header{
    display: flex;
    align-items: center; //居中操作
    background-color: #409EFF;
    justify-content: space-between;
    color: #fff;
    font-size: 20px;
    img{
        height: 50px;
        width: 100px;
    }
    div{
        display: flex;
        align-items: center;
    }
}
// 侧面
.el-aside{
    background-color: #303133;
}
// 中间
.el-main{
    background-color: #e4e7ed;
}
style>

1.2引入相应的组件

// src/plugin/elements
import Vue from 'vue'
import { Button, FormItem, Form, Input, Message, Header, Container, Aside, Main } from 'element-ui'
import { Menu, Submenu, MenuItemGroup, MenuItem } from 'element-ui'
// import { Button } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Header)
Vue.use(Container)
Vue.use(Aside)
Vue.use(Main)

Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.prototype.$msg = Message

效果展示

2.从后端填充菜单相对应的数据

通过使用v-for循环，遍历出当前目录下的数据，还有其子目录下的数据填充进去即可。

<template>
    <el-container class="home-container">
        <el-header>
            <div>
                <img src="../assets/logo.png">
                <span>电子后台管理系统span>
            div>
            <el-button type="primary" @click="logout">退出el-button>
        el-header>
        <el-container>
            <el-aside width="200px">
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        
        <el-submenu index="1" v-for=" item in menuList" :key="item.id">
            <template slot="title">
                <i class="el-icon-location">i>
                <span>{{item.name}}span>
            template>
            <el-menu-item index="1-4-1" v-for="subItem in item.children" :key="subItem.id">
                <i class="el-icon-location">i>
                    <span>{{subItem.name}}span>
                    el-menu-item>
            el-submenu>
        el-menu>
            el-aside>
            <el-main>Mainel-main>
    el-container>
    el-container>
template>

<script>
export default{
    // 存储导航数据
    data () {
        return {
            menuList: []
        }
    },
    // 创建时被执行的函数
    created () {
        this.getMenulist()
        console.log(this.menuList);
    },
    methods:{
        logout (){
            // 第一步，清除token
            window.sessionStorage.clear()
            // 第二步，跳转到登录页面
            this.$router.push('/login')
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        // 从后端中获取数据
        // 由于我们想在他刷新页面时候就能够显示出来，所以得改为同步操作；不改的话就可能会找不到
        async getMenulist () {
            const {data: res} = await this.$axios.get('/api/menu')
            // console.log(res.data);
            this.menuList = res.data
            // console.log(res.data);
        }
    }
}
script>

<style lang="less" scoped>
// 整个组件

.home-container{
    height: 100%;
}
// 界面顶
.el-header{
    display: flex;
    align-items: center; //居中操作
    background-color: #409EFF;
    justify-content: space-between;
    color: #fff;
    font-size: 20px;
    img{
        height: 50px;
        width: 100px;
    }
    div{
        display: flex;
        align-items: center;
    }
}
// 侧面
.el-aside{
    background-color: #303133;
}
// 中间
.el-main{
    background-color: #e4e7ed;
}
style>