提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
一、左侧栏一级菜单优化
1.将菜单数据写入CommonAside.vue
数据如下:
menuData: [
{
path: "/home",
name: "home",
label: "首页",
icon: "s-home",
url: "Home/Home",
},
{
path: "/mall",
name: "mall",
label: "商品管理",
icon: "video-play",
url: "MallManage/MallManage",
},
{
path: "/user",
name: "user",
label: "用户管理",
icon: "user",
url: "UserManage/UserManage",
},
{
path: "/other",
label: "其他",
icon: "location",
children: [
{
path: "/page1",
name: "page1",
label: "页面1",
icon: "setting",
url: "Other/PageOne",
},
{
path: "/page2",
name: "page2",
label: "页面2",
icon: "setting",
url: "Other/PageTwo",
},
],
},],
2.使用计算属性来对不同用户的权限管理
比如说,管理员可以访问用户管理,而用户只可以访问首页
//计算属性进行过滤
computed:{
//没有子菜单
noChildren(){
return this.menuData.filter(item => !item.children)
},
//有子菜单
hasChildren(){
return this.menuData.filter(item => item.children)
}
}
}
3.对数据进行遍历
动态获取icon,然后获取到label
<!-- :index 等价于v-bind-->
<el-menu-item v-for="item in noChildren" :key="item.name" :index="item.name">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{ item.label }}</span>
</el-menu-item>
CommonAside.vue代码如下:
<template>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<!-- :index 等价于v-bind-->
<el-menu-item v-for="item in noChildren" :key="item.name" :index="item.name">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{ item.label }}</span>
</el-menu-item>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data() {
return {
isCollapse: false,
menuData: [
{
path: "/home",
name: "home",
label: "首页",
icon: "s-home",
url: "Home/Home",
},
{
path: "/mall",
name: "mall",
label: "商品管理",
icon: "video-play",
url: "MallManage/MallManage",
},
{
path: "/user",
name: "user",
label: "用户管理",
icon: "user",
url: "UserManage/UserManage",
},
{
path: "/other",
label: "其他",
icon: "location",
children: [
{
path: "/page1",
name: "page1",
label: "页面1",
icon: "setting",
url: "Other/PageOne",
},
{
path: "/page2",
name: "page2",
label: "页面2",
icon: "setting",
url: "Other/PageTwo",
},
],
},],
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
},
//计算属性进行过滤
computed:{
//没有子菜单
noChildren(){
return this.menuData.filter(item => !item.children)
},
//有子菜单
hasChildren(){
return this.menuData.filter(item => item.children)
}
}
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
二、二级菜单显示
有子菜单的导航栏设置
<el-submenu v-for="item in hasChildren" :key="item.label" :index="item.label">
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{ item.label }}</span>
</template>
<el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
<el-menu-item :index="subItem.path">{{ subItem.label }}</el-menu-item>
</el-menu-item-group>
</el-submenu>
三、菜单样式显示
设置导航栏字体背景颜色
1.设置整个左侧导航栏的背景色以及字体色
2.将左侧导航栏往下铺满页面
2.脚手架使用less解析器
2.1 控制台下载less
npm i less@4.1.2 less-loader@5.0.0
下载完成后,到package.json查看
2.2 页面设置
2.3 取消默认边框设置
App.vue
效果图如下:
四、菜单实现路由跳转
4.1定义路由index.js
4.2 创建路由vue
创建src—views—Mall.vue/PageOne.vue/PageTwo.vue
4.3 index.js引入路由
4.4 el-menu使用router="true"属性实现路由跳转
CommonAside.vue代码如下:
<template>
<el-menu default-active="1-4-1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="isCollapse"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
router="true">
<h3>通用后台管理系统</h3>
<!-- :index 等价于v-bind @click 等价于v-on:click-->
<el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :key="item.name" :index="item.name">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{ item.label }}</span>
</el-menu-item>
<el-submenu v-for="item in hasChildren" :key="item.label" :index="item.label">
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{ item.label }}</span>
</template>
<el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
<el-menu-item :index="subItem.path">{{ subItem.label }}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data() {
return {
isCollapse: false,
menuData: [
{
path: "/home",
name: "home",
label: "首页",
icon: "s-home",
url: "Home/Home",
},
{
path: "/mall",
name: "mall",
label: "商品管理",
icon: "video-play",
url: "MallManage/MallManage",
},
{
path: "/user",
name: "user",
label: "用户管理",
icon: "user",
url: "UserManage/UserManage",
},
{
path: "/other",
label: "其他",
icon: "location",
children: [
{
path: "/page1",
name: "page1",
label: "页面1",
icon: "setting",
url: "Other/PageOne",
},
{
path: "/page2",
name: "page2",
label: "页面2",
icon: "setting",
url: "Other/PageTwo",
},
],
},],
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
//点击菜单事件
// clickMenu(item){
// console.log(item);
// // 当页面的路由与跳转的路由不一致才允许跳转
// if (this.$route.path !== item.path && (this.$route.path == '/home' && (item.path == '/'))){
// this.$router.push(item.path)
// }
// this.$router.push(item.path)
// }
},
//计算属性进行过滤
computed:{
//没有子菜单
noChildren(){
return this.menuData.filter(item => !item.children)
},
//有子菜单
hasChildren(){
return this.menuData.filter(item => item.children)
}
}
}
</script>
<!--设置只作用于当前页面-->
<style lang="less" scope>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
.el-menu{
height: 100vh;
h3 {
color:#fff;
text-align: center;
line-height: 48px;
font-size: 16px;
font-weight: 400;
}
}
</style>