elementui出现展开后子菜单宽度多出1px问题
elementui 出现 菜单 展开 宽度 问题
2023-09-27 14:22:17 时间
添加 就可以解决了
.el-menu {
border-right-width: 0;
}
<template>
<div class="compen-left-men">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
:router="startRouter"
active-text-color="#ffd04b"
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>审批管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/awaitdo">待审批</el-menu-item>
<el-menu-item index="/alreadygreen">已审批</el-menu-item>
<el-menu-item index="/approvedby">审批人</el-menu-item>
<el-menu-item index="/quickset">快捷语设置</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
startRouter: true,
}
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style lang="less" scoped>
.compen-left-men {
height: 100%;
}
.el-menu-vertical-demo {
height: 100%;
}
.el-submenu {
width: 192px;
}
.el-menu-item {
min-width: 192px;
width: 192px;
border: none;
}
.el-menu {
border-right-width: 0;
}
</style>
相关文章
- elementui表格table排序问题
- vue.js+koa2项目实战(一)创建项目和elementUI配置
- vue实战入门进阶篇七:vue+elementui实现网站后台-访问统计界面实现
- vue实战入门进阶篇四:vue+elementui实现网站后台-主页框架实现
- vue实战入门进阶篇三:vue+elementui实现网站后台-系统框架搭建
- ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
- ElementUI dialog对话框 设置固定高度
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
- vue封装组件,类似elementUI组件库打包发布到npm上