element ui 打开左侧菜单滚动条

要在 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;
}

相关问题

vue2二级导航栏左侧

### 创建 Vue2 中左侧固定的二级导航栏

为了实现在 Vue2 项目中创建左侧固定且带有二级菜单的导航栏，可以采用多种方法和技术栈来达成目标。下面介绍一种基于 `Element UI` 的解决方案[^4]。

#### 安装 Element UI

首先，在项目中安装 `element-ui`：

npm install element-ui --save

接着在 main.js 文件里引入整个库或按需加载所需组件。

#### 组件结构设计

构建一个名为 `SideNav.vue` 的新组件用于封装侧边导航逻辑。此组件将负责处理一级和二级菜单的数据展示以及交互行为。

#### HTML 结构与样式设置

定义基本的 HTML 模板，并应用必要的 CSS 来确保布局美观合理。这里会利用到 Flexbox 或 Grid 布局技术使页面更加灵活响应不同尺寸屏幕。

<template>
  <el-menu :default-active="activeIndex" class="side-nav el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
    <!-- 循环遍历一级菜单 -->
    <el-submenu v-for="(item, index) in menuData" :key="index" :index="String(index)">
      <template slot="title"><i :class="item.icon"></i>{{ item.title }}</template>

      <!-- 如果存在子项，则继续循环生成二级菜单 -->
      <el-menu-item-group v-if="item.children && item.children.length > 0">
        <el-menu-item v-for="(childItem, childIndex) in item.children" :key="`${index}-${childIndex}`">{{ childItem.name }}</el-menu-item>
      </el-menu-item-group>
      
      <!-- 若无子项则直接作为单层链接 -->
      <span v-else></span>
    </el-submenu>
  </el-menu>
</template>

#### JavaScript 行为控制

编写相应的脚本来管理状态变化和其他业务逻辑，例如监听用户的操作事件（如打开关闭子菜单）、维护当前激活的状态等。

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      menuData: [
        {
          icon: 'el-icon-setting',// 图标类名
          title: '首页',           // 主标题名称
          children: []            // 子菜单数组为空表示没有下级菜单
        },
        {
          icon: 'el-icon-document',
          title: '文档中心',
          children: [{name:'指南'},{name:'教程'}]
        }
      ]
    };
  },
  methods:{
    handleOpen(key, keyPath){
      console.log('opened submenu:', key, keyPath);
    },
    handleClose(key, keyPath){
      console.log('closed submenu:', key, keyPath);
    }
  }
}
</script>

#### 样式调整优化

为了让侧边栏保持固定位置而不随滚动条移动，可以在全局样式文件或者本组件内添加如下规则:

<style scoped lang="scss">
.side-nav{
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 200px; /* 可根据实际需求修改 */
  overflow-y:auto ;
}

/* 当前活动项高亮显示 */
.is-active {
  background-color:#ecf5ff !important;
  color:#409eff!important;
}
</style>

通过上述步骤即可完成一个简单的左侧固定带二级菜单的导航栏。当然还可以进一步扩展功能，比如增加权限验证、动态加载数据等功能以满足更复杂的应用场景需求。