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

• 前端

页面整体效果图

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

1.页面布局

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

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

import { defineStore } from  'pinia'
import {ref} from 'vue'
export const tabsStore = defineStore('tabs',()=>{
  const editableTabsValue =ref('home')
  const editableTabs = ref([
    {
      title: '工作台',
      name: 'home',
    },
  ])

  return {editableTabs,editableTabsValue}
})

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

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值也要跟当前路由保持一致。

 

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/0d257c34e9.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐