VUE3 el-Menu + tabs 联动

在Vue 3中，你可以使用el-menu和el-tabs组件来创建一个导航菜单和标签页，并实现它们之间的联动。以下是一个简单的例子：

<template>
  <el-row>
    <el-col :span="4">
      <!-- 导航菜单 -->
      <el-menu
        :default-openeds="['1']"
        @select="handleSelect"
      >
        <el-submenu index="1">
          <template #title>导航一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-submenu>
        <!-- 其他菜单项 -->
      </el-menu>
    </el-col>
    <el-col :span="20">
      <!-- 标签页 -->
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="用户管理" name="first">用户管理的内容</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理的内容</el-tab-pane>
        <!-- 其他标签页项 -->
      </el-tabs>
    </el-col>
  </el-row>
</template>
 
<script setup>
import { ref } from 'vue';
 
const activeName = ref('first');
 
// 菜单选中时的回调
function handleSelect(key, keyPath) {
  // 根据菜单项的index来设置tabs的activeName
  activeName.value = key;
}
 
// 标签页点击时的回调
function handleTabClick(tab, event) {
  // 可以添加额外的逻辑，比如刷新内容等
}
</script>

在这个例子中，el-menu的select事件与handleSelect函数绑定，当用户选择一个菜单项时，会更新activeName的值，从而激活对应的el-tabs标签页。同时，el-tabs的tab-click事件与handleTabClick函数绑定，当用户点击标签页时，会触发相关逻辑。这样，el-menu和el-tabs之间就可以实现联动。