Ant Design Vue 菜单 tab 联动
时间: 2025-01-05 10:35:51 浏览: 31
### 实现 Ant Design Vue 菜单与 Tab 的联动
为了实现在 Ant Design Vue 中通过菜单点击来切换对应的 Tab 页面功能,可以通过监听菜单项的选择事件,并利用该事件触发 Tab 组件相应标签页的激活。下面具体介绍实现方式。
#### 使用 `a-menu` 和 `a-tabs`
定义两个组件实例分别代表菜单 (`a-menu`) 及选项卡 (`a-tabs`) 。对于这两个组件而言,共享一个状态变量用于同步当前选中的菜单项以及Tab面板[^1]。
```vue
<template>
<div id="app">
<!-- 左侧导航栏 -->
<a-menu v-model:selectedKeys="currentKey" @select="handleMenuClick">
<a-menu-item key="1">Item 1</a-menu-item>
<a-menu-item key="2">Item 2</a-menu-item>
<a-menu-item key="3">Item 3</a-menu-item>
</a-menu>
<!-- 主体内容区 -->
<a-tabs :active-key="currentKey" @change="handleChange">
<a-tab-pane key="1" tab="Pane 1">
Content of Pane 1
</a-tab-pane>
<a-tab-pane key="2" tab="Pane 2">
Content of Pane 2
</a-tab-pane>
<a-tab-pane key="3" tab="Pane 3">
Content of Pane 3
</a-tab-pane>
</a-tabs>
</div>
</template>
<script setup>
import { ref } from 'vue';
const currentKey = ref('1');
function handleMenuClick({ item, key }) {
console.log(`click on menu ${key}`);
}
function handleChange(key) {
currentKey.value = key;
}
</script>
```
上述代码展示了如何创建一个简单的应用界面,在其中包含了左侧固定宽度的垂直菜单和右侧占据剩余空间的主要工作区域。当用户选择不同的菜单条目时,会更新 `currentKey` 值从而改变显示的具体Tab页面;而每次Tab发生变化也会调用相应的回调函数去调整菜单高亮位置。
阅读全文