antdesign pro vue pro-layout如何手动设置菜单高亮

在 Ant Design Pro Vue 的 ProLayout 组件中，可以手动设置菜单高亮的方式如下：

1. 在 ProLayout 组件中，添加 ref 属性，用于获取 ProMenu 组件的实例：

<pro-layout ref="layout">
  ...
</pro-layout>

2. 在需要设置菜单高亮的地方，调用 ProMenu 组件的 setActiveMenu 方法，传入当前路由对应的菜单项的 key 值，例如：

this.$refs.layout.$refs.menu.setActiveMenu('/dashboard/analysis')

其中 '/dashboard/analysis' 是当前路由对应的菜单项的 key 值。这样就可以手动设置菜单高亮了。

相关问题

antdesign pro vue pro-layout怎么手动设置菜单高亮

在 antd pro vue 中，可以通过手动设置菜单高亮的方式来实现。具体步骤如下：

1. 在 `config/config.js` 中找到 `layout` 配置，设置 `disableContentMargin: true`，以禁用默认的菜单高亮样式。

2. 在 `src/layouts/BasicLayout.vue` 中找到 `PageHeaderWrapper` 组件，添加 `:title="false"` 属性，以禁用默认的页面标题。

3. 在 `src/layouts/BasicLayout.vue` 中找到 `SiderMenu` 组件，添加 `:selectedKeys="selectedKeys"` 属性，其中 `selectedKeys` 是一个数组，存储当前选中的菜单项的 key 值。

4. 在 `src/layouts/BasicLayout.vue` 中添加一个 `watch`，监听路由变化，更新 `selectedKeys` 数组的值。具体代码如下：

watch: {
  '$route'(to, from) {
    const path = to.path
    const menus = this.menuData
    const selectedKeys = []
    menus.forEach(item => {
      if (item.children) {
        item.children.forEach(child => {
          if (child.path === path) {
            selectedKeys.push(child.key)
          }
        })
      } else if (item.path === path) {
        selectedKeys.push(item.key)
      }
    })
    this.selectedKeys = [...selectedKeys]
  }
}

以上就是手动设置菜单高亮的步骤，希望对你有所帮助。

vue @ant-design-vue/pro-layout 1.0.12

`@ant-design-vue/pro-layout` 是一个 Ant Design Vue 的布局组件库，提供了一些现成的布局组件和页面模板，可以快速搭建出一个美观、易用的页面布局。`1.0.12` 是 `@ant-design-vue/pro-layout` 的一个版本号，表示当前使用的是该组件库的 1.0.12 版本。如果您想了解更多关于该组件库的信息，可以查看官方文档：https://pro.antdv.com/components/layout-cn/