vue3 el-menu,el-tabs实现联动

页面整体效果图

1.页面布局

        首先布置好布局，页面的整体效果如下：

1. <template>
2. <div class="box">
3. <div class="box__left">
5. <index-sidebar>index-sidebar>
7. div>
8. <div class="box__right">
9. <index-header>index-header>
11. <index-tabs>index-tabs>
13. div>
14. div>
15. template>
17. <script setup lang="ts">
19. script>
21. <style scoped lang="scss">
22. @import '@/assets/css/base.scss';
23. .box{
24. display: flex;
25. &__left{
26. width: 110px;
27. }
28. &__right{
29. flex: 1;
30. }
31. }
32. style>

 2.侧边栏用el-menu标签，标签的选中状态与属性default-active有关，tabs标签用el-tabs,选中转态态与editableTabsValue有关，实现关联就是将2个属性的值相同即可。由于页面是封装成了子组件，所以这里el-tabs的标签属性editableTabs，editableTabsValue在pinia中进行状态管理，在进行引入。

1. import { defineStore } from 'pinia'
2. import {ref} from 'vue'
3. export const tabsStore = defineStore('tabs',()=>{
4. const editableTabsValue =ref('home')
5. const editableTabs = ref([
6. {
7. title: '工作台',
8. name: 'home',
9. },
10. ])
12. return {editableTabs,editableTabsValue}
13. })

3.在index-tabs.vue中，映入Pinia里的editableTabs,editableTabsValue，在removeTab事件中不希望移除第一个标签，先进行判断是否点击的是第一个即可，changTab事件点击跳转对应路由

1. <template>
2. <div class="tabs">
3. <el-tabs v-model="tab.editableTabsValue" type="card" class="demo-tabs" closable @tab-remove="removeTab" @tab-change="changeTab">
5. <el-tab-pane v-for="item in tab.editableTabs" :key="item.name" :label="item.title" :name="item.name">
6. <keep-alive><router-view >router-view>keep-alive>
7. el-tab-pane>
8. el-tabs>
9. div>
10. template>
11. <script lang="ts" setup>
12. import { ref} from 'vue'
13. import { useRouter } from 'vue-router'
14. const router = useRouter()
15. import { tabsStore } from '@/stores/tabs.js'
16. const tab = tabsStore()
18. const removeTab = (targetName: string) => {
19. if (targetName !== 'home') {//判断点击是否为工作台
20. if (tab.editableTabsValue === targetName) {
21. tab.editableTabs.forEach((tabs, index) => {
22. if (tabs.name === targetName) {
23. const nextTab = tab.editableTabs[index + 1] || tab.editableTabs[index - 1]
24. if (nextTab) {
25. router.push(nextTab.name)
26. }
27. }
28. })
29. }
30. //过滤掉当前点击的tab标签
31. tab.editableTabs = tab.editableTabs.filter((tab) => tab.name !== targetName)
32. }
34. }
35. const changeTab = (targetName: string)=>{
36. router.push(targetName)
37. }
40. script>

4.在index-sidebar.vue中，先设置好el-menu的router属性，对应的index填上跳转的路由。default-active这里命名为Eindex，在，通过watch监听事件监听路由的变化，先将tab.editableTabs中的title值取出为一个数组，再对当前route.name进行判断是否存在，不存在则添加到tab.editableTabs数组中。Eindex的值与当前路由名字保持一致即可实现tabs和menu的互联。

5.当刷新页面时，路由会只保留第一个tab标签，可能与当前路由对应不上，需要在onMounted中判断当前路由,若不等于第一个标签的路由，则tab.editableTabs数组添加该值，Eindex值也要跟当前路由保持一致。

1. <template>
2. <div class="sidebar">
4. <div class="sidebar__logo">logodiv>
7. <el-menu class="el-menu-vertical-demo" :default-active="Eindex" unique-opened router>
8. <el-sub-menu index="1">
9. <template #title>
10. <el-icon>
11. <location />
12. el-icon>
13. <span>影片span>
14. template>
15. <el-menu-item-group title="影片">
16. <el-menu-item index="film-management" name="影片管理">影片管理el-menu-item>
17. <el-menu-item index="film-types">影片分类el-menu-item>
18. el-menu-item-group>
19. el-sub-menu>
21. <el-sub-menu index="2">
22. <template #title>
23. <el-icon>
24. <location />
25. el-icon>
26. <span>影院span>
27. template>
28. <el-menu-item-group title="影院">
29. <el-menu-item index="cinema-management">影院管理el-menu-item>
30. el-menu-item-group>
31. el-sub-menu>
33. <el-sub-menu index="3">
34. <template #title>
35. <el-icon>
36. <location />
37. el-icon>
38. <span>用户span>
39. template>
40. <el-menu-item-group title="用户">
41. <el-menu-item index="user-management">用户管理el-menu-item>
42. el-menu-item-group>
43. el-sub-menu>
44. el-menu>
46. div>
47. template>
49. <script setup lang="ts">
50. import {useRouter,useRoute} from 'vue-router'
51. const router = useRouter()
52. const route = useRoute()
53. import {watch,ref, onMounted} from 'vue'
54. import { tabsStore } from '@/stores/tabs.js'
55. const tab = tabsStore()
56. const Eindex = ref()
57. onMounted(()=>{
59. if(route.name!=='home'){
60. tab.editableTabs.push({
61. title: route.meta.title,
62. name: route.name,
63. })
64. tab.editableTabsValue = route.name
65. Eindex.value=route.name
66. }
67. })
68. watch(route,()=>{
69. const arr =[]
70. tab.editableTabs.forEach(item => {
71. arr.push(item.title)
72. });
73. const res = arr.indexOf(route.meta.title)
74. if(res==-1){
75. tab.editableTabs.push({
76. title: route.meta.title,
77. name: route.name,
78. })
79. }
80. tab.editableTabsValue = route.name
81. Eindex.value=route.name
82. })
83. script>