当前位置：首页 > news >正文

后台管理系统中常见的三栏布局总结：使用element ui构建

news 2025/8/25 8:55:17

使用的element ui中el-menu
在这里插入图片描述

vue2 使用 el-menu构建的列表布局：列表可以折叠展开

<template><div class="home"><header><el-button type="primary" @click="handleClick">切换</el-button></header><div class="content"><el-scrollbar class="sidebar"><el-menuclass="menubox":collapse="this.$store.state.isCollapse"background-color="#25D083":class="{ collapse: this.$store.state.isCollapse }"><!-- 注意：这里是有扩展的子列表 ， title放名称， el-men-item放的是具体内容 ! --><el-submenu index="1"><template slot="title"><i class="el-icon-location icon"></i><span slot="title">导航一</span></template><el-menu-item index="1-4-1"><i class="el-icon-location icon"></i><span>选项1</span></el-menu-item><el-menu-item index="1-4-1"><i class="el-icon-location icon"></i><span>选项2</span></el-menu-item></el-submenu><el-menu-itemindex="2"><i class="el-icon-menu icon"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3"><i class="el-icon-document icon"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting icon"></i><span slot="title">导航四</span></el-menu-item></el-menu></el-scrollbar><div class="mainbox"></div></div></div>
</template><script>
// @ is an alias to /srcexport default {name: "HomeView",data() {return {isCollapse: true,};},methods: {handleClick() {this.$store.dispatch("change");},},
};
</script>
<style lang="scss">
$topHeight: 60px;
$minWidth: 50px;
$maxWidth: 160px;
.border {border: 1px solid blue;
}
.home {box-sizing: border-box;overflow: hidden;height: 100vh;header {height: $topHeight;line-height: $topHeight;background: pink;}.content {display: flex;height: calc(100vh - $topHeight);// 侧边滚动条.sidebar {height: 100%;background: #25d083;// 设置最大高度，当高度超出时候滚动.menubox {width: $maxWidth;max-height: calc(100vh - $topHeight);transition: all 0.3s; // 设置过渡效果// 自定义修改el-menu的布局， 标题对应关系.el-submenu__title 和 el-menu-item.el-submenu > .el-submenu__title,.el-menu-item {margin: 20px auto;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 70px;  // 默认的高度是56px， line-height也是56px， 根据需要修改line-height: 40px !important; .icon {font-size: 25px;}span {font-size: 14px;}}// 折叠后，el-menu-item的图标距离左边很远，发现是padding导致的，要!important.el-menu-item {.el-tooltip {padding: 0 !important;}}// 当el-menu折叠的时候&.collapse {width: $minWidth;}}}.mainbox {flex: 1;background: rgb(217, 236, 171);}}
}</style>

涉及到的知识点整理

el-scrollbar 是element ui中的内置组件，没有官方文档。
- 使用场景：当只需要某一部分高度超出滚动，而不影响整体的布局时，将该部分用el-scrollbar包裹即可，一般要设置这部分的最大高度。
```
<el-scrollbar><box style="max-height: 200px"> </box>
</el-scrollbar>
// 有时可能有横向滚动条/* 隐藏横向滚动条 */
.el-scrollbar__wrap{overflow-x: hidden;
}
```
将控制折叠展开的变量放在store中，防止跨组件通信比较麻烦
修改el-submenu 和 el-menu-item的样式（css基础不好，这块整理了好久才明白）：自定义修改el-menu的布局，标题对应关系.el-submenu__title 和 el-menu-item (牢记这两个位置)
- 问题：折叠后，发现自定义的宽度导致图标并没有居中
- 解决方法：!important
```
  .el-menu-item {.el-tooltip {padding: 0 !important;}
}
```
小建议：可以使用scss先定义好变量（侧边栏）的宽度，如200 -> 60, 在最外层加过渡效果，视觉更友好