element ui 打开左侧菜单滚动条
时间: 2023-05-08 14:56:34 浏览: 467
要在 Element UI 中开启左侧菜单滚动条,需要在菜单组件上设置一个属性。首先,将 <el-menu> 标签的属性 mode 设置为 vertical,以便使左侧菜单成为垂直导航栏。
接下来,需要为 <el-menu> 组件添加一个新的属性,即:collapse-transition,将它的值设为 false。这个属性用于控制左侧菜单栏折叠时,是否显示过度动画效果,因为过度动画效果会导致滚动条显示不正常。
另外,需要为左侧菜单添加样式,以便使它适应滚动条的显示。可以为 <el-menu> 组件的父元素添加以下 CSS 样式:
height: 100%;
overflow-y: auto;
其中,height:100% 告诉左侧菜单占据整个可视区域的高度;overflow-y:auto 使得左侧菜单溢出时出现滚动条。这样,当左侧菜单的子菜单内容超出父元素高度时,滚动条就会出现。
总之,要在 Element UI 中打开左侧菜单滚动条,可以设置以下属性和样式:
<el-menu mode="vertical" collapse-transition="false">
<!-- 菜单内容 -->
</el-menu>
样式:
.left-menu {
height: 100%;
overflow-y: auto;
}
阅读全文