ant-design-vue菜单栏和标签页联动

你可以使用 `ant-design-vue` 中的 `Menu` 组件和 `Tabs` 组件来实现菜单栏和标签页的联动。具体的实现步骤如下：

1. 首先，你需要引入 `Menu` 和 `Tabs` 组件：

<template>
  <div>
    <a-menu :default-selected-keys="selectedKeys" mode="horizontal" @select="handleMenuSelect">
      <a-menu-item key="1">菜单项1</a-menu-item>
      <a-menu-item key="2">菜单项2</a-menu-item>
      <a-menu-item key="3">菜单项3</a-menu-item>
    </a-menu>

    <a-tabs v-model:selectedKey="selectedKeys[0]">
      <a-tab-pane key="1" tab="标签页1">标签页1的内容</a-tab-pane>
      <a-tab-pane key="2" tab="标签页2">标签页2的内容</a-tab-pane>
      <a-tab-pane key="3" tab="标签页3">标签页3的内容</a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedKeys: ['1']
    };
  },
  methods: {
    handleMenuSelect({ key }) {
      this.selectedKeys = [key];
    }
  }
};
</script>

2. 在 `data` 中定义一个 `selectedKeys` 数组，用于记录当前选中的菜单项和标签页的 key 值。

3. 在 `Menu` 组件中，通过 `default-selected-keys` 属性设置默认选中的菜单项。在 `Tabs` 组件中，通过 `v-model:selectedKey` 属性绑定选中的标签页。

4. 通过 `@select` 事件监听菜单项的选择，将选中的菜单项的 key 值赋值给 `selectedKeys` 数组，实现菜单和标签页的联动。

这样，当你选择菜单项时，相应的标签页会被选中显示。希望对你有帮助！