elementui 侧框自适应

element-ui 侧框自适应

先上代码

<div class="left">
   <el-row class="tac" style="height:100%">
     <el-col style="height:100%">
       <el-menu
         default-active="2"
         class="el-menu-vertical-demo"
         @open="handleOpen"
         style="height:100%"
         @close="handleClose">
         <el-menu-item index="1">
           <span>图片</span>
         </el-menu-item>
         <el-submenu index="2">
           <template slot="title">
             <span slot="title">配置</span>
           </template>
           <el-menu-item-group>
             <el-menu-item index="2-1">基本</el-menu-item>
             <el-menu-item index="2-2">配色</el-menu-item>
             <el-menu-item index="2-3">头图</el-menu-item>
             <el-menu-item index="2-4">功能</el-menu-item>
             <el-menu-item index="2-5">信息</el-menu-item>
           </el-menu-item-group>
         </el-submenu>
         <el-menu-item index="3">
           <span>人员</span>
         </el-menu-item>
         <el-menu-item index="4">
           <span slot="title">下载</span>
         </el-menu-item>
         <el-menu-item index="5">
           <span slot="title">统计</span>
         </el-menu-item>
       </el-menu>
     </el-col>
   </el-row>
 </div>

当需要自适应全部屏幕的时候，需要在外边框设置样式高度，否则即使在内部设置高度依旧无法继承到element外层的样式。每一套样式需要一步一步的继承，才能达到我们想要的效果。