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

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

涉及到的知识点整理

1. el-scrollbar 是element ui中的内置组件，没有官方文档。

   • 使用场景： 当只需要某一部分高度超出滚动，而不影响整体的布局时，将该部分用el-scrollbar包裹即可，一般要设置这部分的最大高度。

     
         
     
     // 有时可能有横向滚动条
     
     /* 隐藏横向滚动条 */
     .el-scrollbar__wrap{
       overflow-x: hidden;
     }
     

2. 将控制折叠展开的变量放在store中，防止跨组件通信比较麻烦

3. 修改el-submenu 和 el-menu-item的样式（css基础不好，这块整理了好久才明白）：自定义修改el-menu的布局， 标题对应关系.el-submenu__title 和 el-menu-item (牢记这两个位置)

   • 问题： 折叠后，发现自定义的宽度导致图标并没有居中
   • 解决方法：!important

       .el-menu-item {
           .el-tooltip {
             padding: 0 !important;
           }
     }
     

4. 小建议： 可以使用scss先定义好 变量（侧边栏）的宽度，如200 -> 60, 在最外层加过渡效果，视觉更友好