menu组件items参数使用computed计算属性且label参数值为VNode时出现很多错误 #6864

catpigdog · 2023-08-18T14:54:53Z

I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.0.0-rc.6

Environment

Reproduction link

https://github.com/catpigdog/bug-antdforvue-menu

Steps to reproduce

使用Menu时 items参数传入一个computed返回值ItemType，且ItemType的label属性值为VNode时
menu会出现样式错乱，openKeys selectedKeys 参数没作用， inline-collapsed 参数改变时报错

What is expected?

正确渲染

What is actually happening?

报错渲染错乱

ItemType['label'] VueNode 能改为 VueNode | ()=>VueNode 就很棒

github-actions · 2023-08-21T01:08:07Z

Hello @catpigdog. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch, fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @catpigdog，我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支，务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

kovsu · 2023-08-23T00:48:46Z

@catpigdog openKeys selectedKeys 参数没作用，是因为你没有给 key 值吧，看了一眼你仓库。其他地方你要不再仔细描述一下？[😛]

catpigdog · 2023-08-24T14:41:04Z

@catpigdogopenKeys selectedKeys 参数没作用，是因为你没有给 key 值吧，赶紧查看一下你的仓库。其他地方你要不再仔细描述一下吗？[😛]
抱歉，key字段写成了name字段，仓库代码已更新。但是这个问题依然是存在的

catpigdog · 2023-08-25T04:45:57Z

icon和我这个问题无关，主要是由label传入Vnode后，且由vue computed计算属性返回就会出现布局错乱问题：
以下是传入items内容后，更新inlineCollapsed参数或者点击该菜单 item1时就会出现布局错乱，在该菜单位置多生成一个menu

const items = computed(() => [
  {
    key: 'sub1',
    icon: () => h(SettingOutlined),
    label: 'Navigation Three - Submenu',
    title: 'Navigation Three - Submenu',
    children: [
      {
        type: 'group',
        label: 'Item 1',
        children: [
          {
            label: h(AppstoreOutlined),
            title: 'setting:1',
            key: 'setting:1',
          },
          {
            label: 'Option 2',
            key: 'setting:2',
          },
        ],
      }
    ],
  }
]);