vue elementui左侧菜单联动标签_element ui 侧边栏菜单设置滚动条

在使用 Vue 和 Element UI 开发前端应用时，经常会遇到需要实现左侧菜单联动标签页，并且当菜单项较多时需要设置滚动条的需求。本文将介绍如何实现这一功能，并提供多种解决方案。

解决方案概述

为了实现左侧菜单联动标签页并设置滚动条，我们需要完成以下步骤：
1. 使用 Element UI 的 el-menu 组件来创建左侧菜单。
2. 使用 el-tabs 组件来创建标签页。
3. 通过 Vue 的响应式数据绑定和事件处理来实现菜单和标签页的联动。
4. 使用 CSS 或者 Element UI 提供的滚动条组件来处理菜单的滚动条。

实现步骤

1. 创建左侧菜单

首先，我们使用 el-menu 组件来创建左侧菜单。假设我们有一个包含多个菜单项的数据数组 menuItems。

html

  <div class="sidebar">
    
      
        <i></i>
        <span>{{ item.title }}</span>
      
    
  </div>
</p>


export default {
  data() {
    return {
      activeIndex: '1',
      menuItems: [
        { index: '1', title: '首页', icon: 'el-icon-s-home' },
        { index: '2', title: '用户管理', icon: 'el-icon-user' },
        { index: '3', title: '订单管理', icon: 'el-icon-s-order' },
        // 其他菜单项...
      ]
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
      this.$emit('menu-select', index);
    }
  }
};



.sidebar {
  height: 100%;
  overflow-y: auto; /* 设置滚动条 */
}


<p>

2. 创建标签页

接下来，我们使用 el-tabs 组件来创建标签页，并通过 v-model 绑定当前选中的标签页。

html

  <div class="content">
    
      
        
      
    
  </div>
</p>


import Home from './components/Home.vue';
import UserManagement from './components/UserManagement.vue';
import OrderManagement from './components/OrderManagement.vue';

export default {
  components: {
    Home,
    UserManagement,
    OrderManagement
  },
  props: {
    activeIndex: String
  },
  data() {
    return {
      activeTab: this.activeIndex,
      menuItems: [
        { index: '1', title: '首页', component: 'Home' },
        { index: '2', title: '用户管理', component: 'UserManagement' },
        { index: '3', title: '订单管理', component: 'OrderManagement' },
        // 其他菜单项...
      ]
    };
  },
  methods: {
    handleTabClick(tab) {
      this.$emit('tab-click', tab.name);
    }
  },
  watch: {
    activeIndex(newVal) {
      this.activeTab = newVal;
    }
  }
};


<p>

3. 菜单和标签页联动

为了实现菜单和标签页的联动，我们可以在父组件中监听子组件的事件，并同步更新状态。

html

  <div class="app">
    
    
  </div>
</p>


import Sidebar from './components/Sidebar.vue';
import Content from './components/Content.vue';

export default {
  components: {
    Sidebar,
    Content
  },
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    handleMenuSelect(index) {
      this.activeIndex = index;
    },
    handleTabClick(index) {
      this.activeIndex = index;
    }
  }
};



.app {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 200px;
}

.content {
  flex: 1;
}


<p>

多种思路

1. 使用 Element UI 的滚动条组件

Element UI 提供了一个滚动条组件 el-scrollbar，可以更方便地处理滚动条。

html
<template>
<div class="sidebar">
<el-scrollbar>
<el-menu :default-active="activeIndex" @select="handleSelect">
<el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index">
<i :class="item.icon"></i>
<span slot="title">{{ item.title }}</span>
</el-menu-item>
</el-menu>
</el-scrollbar>
</div>
</template>


2. 使用 CSS 自定义滚动条样式

如果你希望自定义滚动条的样式，可以通过 CSS 来实现。

css
.sidebar::-webkit-scrollbar {
  width: 8px;
}</p>

<p>.sidebar::-webkit-scrollbar-track {
  background: #f1f1f1;
}</p>

<p>.sidebar::-webkit-scrollbar-thumb {
  background: #888;
}</p>

<p>.sidebar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

3. 使用第三方滚动条库

如果 Element UI 的滚动条组件不能满足需求，可以考虑使用第三方滚动条库，如 perfect-scrollbar。

bash
npm install perfect-scrollbar


然后在组件中引入并使用：

html

  <div class="sidebar">
    
      
        
          <i></i>
          <span>{{ item.title }}</span>
        
      
    
  </div>
</p>


import PerfectScrollbar from 'perfect-scrollbar';
import 'perfect-scrollbar/css/perfect-scrollbar.css';

export default {
  mounted() {
    new PerfectScrollbar('.sidebar');
  },
  data() {
    return {
      activeIndex: '1',
      menuItems: [
        { index: '1', title: '首页', icon: 'el-icon-s-home' },
        { index: '2', title: '用户管理', icon: 'el-icon-user' },
        { index: '3', title: '订单管理', icon: 'el-icon-s-order' },
        // 其他菜单项...
      ]
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
      this.$emit('menu-select', index);
    }
  }
};


<p>

通过以上几种方法，你可以根据实际需求选择最适合的方式来实现左侧菜单联动标签页并设置滚动条的功能。