vue 三级菜单问题 跪求大佬帮忙解决

 问题是这样的 点击二级菜单正常  点击三级菜单 之后  主显示区域 就会再出现一个小的左侧菜单和顶部  该怎么办呢

<template>
<el-row class="container">
<div class="left">
<!-- 左侧菜单 -->
<img class="leftLogo" src="https://www.pianshen.com/article/common/images/trans.png" alt="转到首页" @click="goToMain">
<aside class="menu-expanded">
<!--导航菜单-->
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" unique-opened router>
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title">
<i :class="item.iconCls"></i> {{item.name}}
</template>
<template v-for="child in item.children" v-if="!child.hidden">
<el-submenu  :index="child.path" v-if="!child.leaf">
<template slot="title">{{child.name}}</template>
<el-menu-item v-for="childs in child.children" :index="childs.path">
{{childs.name}}
</el-menu-item>
</el-submenu>
<el-menu-item v-if="child.leaf" :index="child.path">
{{child.name}}
</el-menu-item>
</template>
</el-submenu>
<el-menu-item v-if="item.leaf && item.children.length > 0" :index="item.children[0].path">
<i :class="item.iconCls"></i> {{item.children[0].name}}
</el-menu-item>
</template>
</el-menu>
</aside>
</div>
<div class="main" id="main">
<!-- 头 -->
<el-row>
<el-col :span="24" class="header">
<el-col :span="18" class="logo">
{{sysName}}
</el-col>
<el-col :span="6" class="userinfo">
<el-dropdown trigger="hover">
<span class="el-dropdown-link userinfo-inner"><img :src="https://www.pianshen.com/article/369840961/this.sysUserAvatar" />{{sysUserName}}</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-col>
</el-row>
<el-row>
<el-col :span="24" class="content-container">
<!-- 主显示区域 -->
<el-breadcrumb v-if="$route.name != '首页'" separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/mainPage' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>{{$route.name}}</el-breadcrumb-item>
</el-breadcrumb>
<!-- <div class="grid-content bg-purple-light"> -->
<!-- <transition name="fade" mode="out-in"> -->
<router-view></router-view>
<!-- </transition> -->
<!-- </div> -->
<!-- 修改密码对话框 -->
<!-- <el-dialog title="修改密码" size="tiny" v-model="changePwdVisible" :close-on-click-modal="false">
<el-form :model="form" label-width="80px" :rules="rules" ref="form">
<el-form-item label="原密码" prop="oldPassword">
<el-input type="password" v-model="form.oldPassword"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="pass">
<el-input type="password" v-model="form.pass"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkpass">
<el-input type="password" v-model="form.checkpass"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="changePwdVisible = false;">取消</el-button>
<el-button type="primary" @click.native="changePwd">提交</el-button>
</div>
</el-dialog> -->
</el-col>
</el-row>
</div>
</el-row>
</template>
<script>
import concrete from '../api/jquery-concrete';
export default {
data() {
var validCheckpass = (rule, value, callback) => {
if (value !== this.form.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
// activeIndex: '1',
sysName: '142',
changePwdVisible: false,
sysUserName: '',
sysOrgName: '',
sysUserAvatar: '',
form: {
oldPassword: '',
pass: '',
checkpass: ''
},
rules: {
oldPassword: [
{ required: true, message: '请输入原密码', trigger: 'blur' }
],
pass: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ min: 8, max: 20, message: '请输入8到20位的新密码', trigger: 'blur' }
],
checkpass: [
{ required: true, message: '请确认新密码', trigger: 'blur' },
{ validator: validCheckpass, trigger: 'blur' }
]
},
}
},
methods: {
goToMain() {
this.$router.push({ path: '/mainPage' });
},
onSubmit() {
// console.log('submit!');
},
handleopen() {
//console.log('handleopen');
},
handleclose() {
//console.log('handleclose');
},
handleChangePwd() {
this.form = {
oldPassword: '',
pass: '',
checkpass: ''
};
this.changePwdVisible = true;
},
//修改密码
changePwd() {
this.$refs.form.validate(
valid => {
if (valid) {
this.changePwdVisible = false;
let para = {
password: this.form.oldPassword,
newPassword: this.form.pass
};
userService.changePassword(para).success(
data => {
if (data.success) {
this.$message({
message: data.message,
type: 'success'
});
this.$router.push('/login');
}
}
);
}
}
);
},
handleselect: function(a, b) {},
//退出登录
logout: function() {
var _this = this;
this.$confirm('确认退出吗?', '提示', {
//type: 'warning'
}).then(() => {
sessionStorage.removeItem('user');
_this.$router.push('/login');
}).catch(() => {
});
},
},
mounted() {
var user = sessionStorage.getItem('user');
if (user) {
user = JSON.parse(user);
this.sysOrgName = user.orgName || '';
this.sysUserName = user.userName || '';
if (user.gender == "女") {
this.sysUserAvatar = require('../common/images/heads.jpg');
} else {
this.sysUserAvatar = require('../common/images/head.jpg');
}
}
}
}
</script>
<style scoped lang="scss">
@import '~scss_vars';
.iconfont {
font-size: 1.8em;
margin-right: 5%;
}
.fa {
font-size: 1.1em;
}
.container {
background-color: #F0F2F5;
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
.header {
position: absolute;
top: 0px;
height: 60px;
line-height: 60px;
background: $color-primary;
color: #fff;
box-shadow: 0 0 10px rgb(27, 9, 9);
z-index: 999;
.userinfo {
text-align: right;
padding-right: 35px;
float: right;
.userinfo-inner {
cursor: pointer;
color: #fff;
img {
width: 40px;
height: 40px;
border-radius: 25px;
margin: 10px 0px 10px 15px;
float: right;
}
}
}
.logo {
//width:230px;
height: 80px;
font-size: 20px;
padding-left: 30px;
padding-right: 20px; //border-color: rgba(238,241,146,0.3);
//border-right-width: 1px;
//border-right-style: solid;
img {
width: 40px;
float: left;
margin: 14px 10px 10px 18px;
}
.txt {
color: #fff;
}
}
.logo-width {
width: 230px;
}
.logo-collapse-width {
width: 60px
}
.tools {
padding: 0px 0px;
width: 14px;
height: 80px;
line-height: 80px;
cursor: pointer;
}
.tools2 {
padding: 0px 25px;
width: 14px;
height: 80px;
line-height: 80px;
cursor: pointer;
}
.tools3 {
padding: 0px 50px;
width: 14px;
height: 80px;
line-height: 80px;
cursor: pointer;
}
}
.left {
background-color: #495060;
display: flex;
position: absolute;
top: 0px;
bottom: 0px;
overflow: hidden;
padding-top: 85px;
.leftLogo {
width: 22%;
position: absolute;
top: 13px;
left: 33%;
}
aside {
flex: 0 0 250px;
width: 250px; // position: absolute;
// top: 0px;
// bottom: 0px;
.el-menu {
height: 100%;
}
.collapsed {
width: 60px;
.item {
position: relative;
}
.submenu {
position: absolute;
top: 0px;
left: 60px;
z-index: 99999;
height: auto;
display: none;
}
}
}
.menu-expanded {
flex: 0 0 220px;
width: 220px;
overflow-y: auto;
overflow-x: hidden;
}
}
.main {
height: 100%;
display: flex;
flex-direction: column;
background-color: #f0f0f0;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 200px;
overflow: hidden;
}
.content-container {
position: absolute;
top: 60px;
bottom: 0px;
overflow-y: auto;
padding: 14px;
}
}
</style>

 

以上是 vue 三级菜单问题 跪求大佬帮忙解决 的全部内容， 来源链接： utcz.com/a/46290.html

回到顶部