Vue ElementUi导航组件结合后台管理实现左侧菜单滚动不显示滚动条

Posted 龖龖龖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue ElementUi导航组件结合后台管理实现左侧菜单滚动不显示滚动条相关的知识,希望对你有一定的参考价值。

1、代码例

 <el-aside :width="Iconflag ? '200px' : '0px'">
      <el-row style="width: 100%">
        <el-col>
          <div class="Text">后台管理系统</div>
          //导航外新包一个盒子,除了Text类盒子不滚动外,其余导航滚动,并不显示滚动条
          <div class="NavBox">
            <el-menu
              :default-active="$route.path"
              text-color="#fff"
              active-text-color="#ffd04b"
              router
              @open="handleOpen"
              @close="handleClose"
            >```

2、样式(清除滚动条的样式 sass格式)
```javascript
.NavBox 
  height: 100vh;
  overflow-y: auto;
  &::-webkit-scrollbar 
    display: none;
  

以上是关于Vue ElementUi导航组件结合后台管理实现左侧菜单滚动不显示滚动条的主要内容,如果未能解决你的问题,请参考以下文章

vue+element 后台管理系统-折叠侧边导航栏

Vue+ElementUI实现tab选卡式后台Admin

vue+elementui的导航滑块组件

Elementui 导航组件和Vuejs路由结合

前端Vue+Element UI案例:通用后台管理系统-Header+导航栏折叠

vue入门 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)