菜单联动|标签切换 vue elementui实现左侧菜单与标签页联动及侧边栏滚动条设置

本文目录导读：

1. 左侧菜单与标签页联动实现 🔗
2. 侧边栏滚动条设置 📜
3. 最佳实践与注意事项 💡
4. 完整代码示例 📦
5. 参考资源 📚

🚀 Vue Element UI 左侧菜单与标签页联动及滚动条设置全攻略（2025最新版） 🚀

左侧菜单与标签页联动实现 🔗

1 技术栈选型

• 框架：Vue2/Vue3 + Element UI/Element Plus
• 状态管理：Vuex/Pinia
• 路由：Vue Router

2 核心实现步骤 🛠️

① 左侧菜单渲染
使用 el-menu 组件绑定路由路径，通过 default-active 同步当前路由：

<el-menu
  :default-active="$route.path"
  router
  @select="handleMenuSelect"
>
  <el-menu-item v-for="item in menuList" :key="item.path" :index="item.path">
    <i :class="item.icon"></i>
    <span>{{ item.title }}</span>
  </el-menu-item>
</el-menu>

② 标签页动态管理
通过 el-tabs 绑定标签页状态，结合 Vuex 实现标签页的增删和状态持久化：

// store.js
export default new Vuex.Store({
  state: {
    tabList: JSON.parse(sessionStorage.getItem('tabs')) || [],
    activeTab: ''
  },
  mutations: {
    ADD_TAB(state, tab) {
      if (!state.tabList.some(t => t.path === tab.path)) {
        state.tabList.push(tab);
      }
      state.activeTab = tab.path;
    },
    REMOVE_TAB(state, path) {
      state.tabList = state.tabList.filter(t => t.path !== path);
      state.activeTab = state.tabList.length ? state.tabList[0].path : '';
    }
  }
});

③ 路由与标签页联动
监听路由变化,自动同步标签页状态：

watch: {
  $route(to) {
    const tab = { path: to.path, title: to.meta.title };
    this.$store.commit('ADD_TAB', tab);
  }
}

侧边栏滚动条设置 📜

1 使用 el-scrollbar 组件实现原生滚动条替代：

<el-scrollbar style="height: 100vh; overflow-x: hidden;">
  <el-menu>
    <!-- 菜单项 -->
  </el-menu>
</el-scrollbar>

2 自定义滚动条样式 🎨

通过 CSS 调整滚动条外观（支持所有现代浏览器）：

/* 垂直滚动条 */
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
.el-scrollbar__thumb {
  background: rgba(144, 147, 153, 0.3);
  border-radius: 4px;
}
.el-scrollbar__thumb:hover {
  background: rgba(144, 147, 153, 0.5);
}

3 高级技巧：滚动条定位 📍

监听滚动事件,实现滚动到顶部功能：

methods: {
  scrollToTop() {
    const scrollWrap = this.$el.querySelector('.el-scrollbar__wrap');
    scrollWrap.scrollTop = 0;
  }
}

最佳实践与注意事项 💡

1. 状态持久化
   使用 sessionStorage 保存标签页状态,页面刷新后恢复：

   

   // 页面卸载前保存
   window.addEventListener('beforeunload', () => {
     sessionStorage.setItem('tabs', JSON.stringify(this.tabList));
   });

2. 性能优化

   • 标签页过多时，使用 keep-alive 缓存组件：

     <el-tab-pane>
       <keep-alive>
         <router-view></router-view>
       </keep-alive>
     </el-tab-pane>

3. Vue3 适配
   使用 Pinia 替代 Vuex，结合 Composition API：

   // store.js
   export const useMenuStore = defineStore('menu', {
     state: () => ({ tabs: [], activeTab: '' }),
     actions: {
       addTab(tab) {
         // 逻辑同上
       }
     }
   });

完整代码示例 📦

<template>
  <el-container style="height: 100vh;">
    <!-- 左侧菜单 -->
    el-aside width="200px">
      <el-scrollbar>
        el-menu :default-active="activeTab" router>
          <el-menu-item v-for="item in menuList" :key="item.path" :index="item.path">
            <i :class="item.icon"></i>
            span>{{ item.title }}</span>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <!-- 右侧内容 -->
    <el-main>
      <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
        <el-tab-pane v-for="tab in tabList" :key="tab.path" :label="tab.title" :name="tab.path">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>script>
import { mapState, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapState(['tabList', 'activeTab']),
    menuList() {
      return [
        { path: '/dashboard', title: '控制台', icon: 'el-icon-s-home' },
        { path: '/users', title: '用户管理', icon: 'el-icon-user' }
      ];
    }
  },
  methods: {
    ...mapMutations(['ADD_TAB', 'REMOVE_TAB']),
    handleMenuSelect(path) {
      this.$router.push(path);
    },
    removeTab(path) {
      this.REMOVE_TAB(path);
    }
  }
};
</script>

参考资源 📚

1. Element UI 官方文档
2. Vuex 状态管理最佳实践
3. Vue3 + Element Plus 动态标签页实现

🎉 通过以上步骤，即可实现一个支持菜单联动、标签页管理和自定义滚动条的现代化后台管理系统！