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

• 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-menu
          class="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-item
            index="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 /src

export 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>

涉及到的知识点整理

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

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

     <el-scrollbar>
        <box style="max-height: 200px"> </box>
     </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, 在最外层加过渡效果，视觉更友好