后台管理系统中常见的三栏布局总结：使用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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

涉及到的知识点整理

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

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

     <el-scrollbar>
        <box style="max-height: 200px"> </box>
     </el-scrollbar>
     // 有时可能有横向滚动条
     
     /* 隐藏横向滚动条 */
     .el-scrollbar__wrap{
       overflow-x: hidden;
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9

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;
           }
     }
     1
     2
     3
     4
     5

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