使用menu组件时设置mode="vertical"的方式，结果子菜单弹窗没有显示出来，大佬们帮忙看下

[robertyclin]

1、下载ant-design-vue-nuxt代码，本地运行 2、复制antdv的menu例子，运行结果有warning，并且子菜单弹窗并没有显示出来。 antdv官网demo

本地demo

报错信息如下： [Vue warn]: Hydration node mismatch:

• Client vnode: Symbol(v-fgt)
• Server rendered DOM: <!---->
  at <Trigger popupClassName="ant-menu-inline-collapsed-tooltip css-dev-only-do-not-override-3m4nqy" prefixCls="ant-tooltip" action="hover" ... > at <Tooltip title=null overlayClassName="ant-menu-inline-collapsed-tooltip css-dev-only-do-not-override-3m4nqy" trigger="hover" ... > at <ATooltip title=null open=false placement="right" ... > at <AMenuItem key="3" title="Option 3" originItemValue= {key: '3', label: 'Option 3', title: 'Option 3'} > at <SubMenuList id="sub_menu1$$_sub1-popup" ref=Ref< undefined > > at at <Align target=fn key="popup" ref=Ref< undefined > ... > at <BaseTransition onBeforeEnter=fn appear=false persisted=false ... > at <Transition ref=Ref< undefined > onBeforeEnter=fn > at <PopupInner prefixCls="ant-menu-submenu" point=null align= {points: Array(2), overflow: {…}, offset: Array(2)} ... > at <Popup prefixCls="ant-menu-submenu" destroyPopupOnHide=false visible=true ... > at <Portal getContainer=fn ref=Ref< undefined > didUpdate=fn > at <PortalWrapper key="portal" getContainer=undefined didUpdate=fn ... > at <Trigger prefixCls="ant-menu-submenu" popupClassName="ant-menu-submenu-popup ant-menu ant-menu-light css-dev-only-do-not-override-3m4nqy" stretch=null ... > at <PopupTrigger mode="vertical" prefixCls="ant-menu-submenu" visible=true ... > at <ResizeObserver disabled=true onResize=fn class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open ant-menu-submenu-active" ... > at <Item class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open ant-menu-submenu-active" prefixCls="ant-menu-overflow-item" responsive=false ... > at at <RawItem component="li" role="none" class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open ant-menu-submenu-active" ... > at at <ASubMenu key="sub1" icon=fn title="Navigation Three" ... > at <OverflowContextProvider key=2 value= {prefixCls: 'ant-menu-overflow-item', responsive: false, component: {…}, invalidate: true, order: 2, …} > at <ResizeObserver disabled=true onResize=fn > at <Overflow style= {width: '256px'} onMousedown=undefined prefixCls="ant-menu-overflow" ... > at <AMenu openKeys= ['sub1'] onUpdate:openKeys=fn selectedKeys= [] ... > at <Anonymous value= {hashed: true, components: {…}, theme: Theme, token: {…}} > at at <LocaleReceiver children=fn > at <AConfigProvider theme= {algorithm: ƒ} > at <AStyleProvider cache= Entity {cache: Map(5), instanceId: '465803411031b5b'} > at at at

[luyaozi]

我也遇到了 mode="horizontal" 也不生效 nuxt官方文档 安装下来没有css 最后才发现还需要 除了 @ant-design-vue/nuxt 还需要 ant-design-vue 关键是官方文档都没有说明 就真的没见过这么垃圾的 kpi项目何必开源

[ezewu]

我也遇到了 mode="horizontal" 也不生效 nuxt官方文档 安装下来没有css 最后才发现还需要 除了 @ant-design-vue/nuxt 还需要 ant-design-vue 关键是官方文档都没有说明 就真的没见过这么垃圾的 kpi项目何必开源

我也碰到了这个问题 ，安装一下ant-design-vue 就可以了吗？

[ezewu]

安装了，刷新也是报错的

• rendered on server: id="rc_select_TEST_OR_SSR"
  • expected on client: id="rc_select_1" Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead. You should fix the source of the mismatch. at <Anonymous type="search" id="rc_select_1" ref=fn ... > at <SelectInput inputRef=fn prefixCls="ant-select" id="rc_select_1" ... > at <SingleSelector choiceTransitionName="" tagRender=undefined optionLabelRender=undefined ... > at <Selector choiceTransitionName="" placement=undefined tagRender=undefined ... > at <Trigger prefixCls="ant-select-dropdown" popupElement= {v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} containerWidth=null ... > at <SelectTrigger ref=Ref< null > disabled=undefined prefixCls="ant-select" ... > at <BaseSelect choiceTransitionName="" placement=undefined tagRender=undefined ... > at <VcSelect ref=Ref< undefined > virtual=undefined dropdownMatchSelectWidth=undefined ... > at <ASelect value=0 style= {width: '150px'} onChange=fn > at <MediaHead ref="mediaHead" type=0 sort=0 ... > at <Audio onVnodeUnmounted=fn ref=Ref< undefined > > at <Anonymous key="/my/720vr/media/audio" vnode= {v_isVNode: true, v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/my/720vr/media/audio', hash: '', query: {…}, name: 'my-720vr-media-audio', path: '/my/720vr/media/audio', …} ... > at at at <720vr onVnodeUnmounted=fn ref=Ref< undefined > > at <Anonymous key="/my/720vr" vnode= {__v_isVNode: true, v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/my/720vr/media/audio', hash: '', query: {…}, name: 'my-720vr-media-audio', path: '/my/720vr/media/audio', …} ... > at at at <My onVnodeUnmounted=fn ref=Ref< undefined > > at <Anonymous key="/my" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/my/720vr/media/audio', hash: '', query: {…}, name: 'my-720vr-media-audio', path: '/my/720vr/media/audio', …} ... > at at at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... > at at <AStyleProvider cache= Entity {cache: Map(11), instanceId: '53b821912514543'} > at at at log @ browser.mjs?v=87798ed6:44 _log @ core.mjs?v=87798ed6:381 resolveLog @ core.mjs?v=87798ed6:349 _logFn @ core.mjs?v=87798ed6:377 （匿名） @ core.mjs?v=87798ed6:306 warn$1 @ chunk-SGQVLJ32.js?v=87798ed6:1512 propHasMismatch @ chunk-SGQVLJ32.js?v=87798ed6:6605 hydrateElement @ chunk-SGQVLJ32.js?v=87798ed6:6355 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6219 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateChildren @ chunk-SGQVLJ32.js?v=87798ed6:6408 hydrateElement @ chunk-SGQVLJ32.js?v=87798ed6:6314 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6219 hydrateChildren @ chunk-SGQVLJ32.js?v=87798ed6:6408 hydrateFragment @ chunk-SGQVLJ32.js?v=87798ed6:6449 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6204 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateChildren @ chunk-SGQVLJ32.js?v=87798ed6:6408 hydrateElement @ chunk-SGQVLJ32.js?v=87798ed6:6314 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6219 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateChildren @ chunk-SGQVLJ32.js?v=87798ed6:6408 hydrateFragment @ chunk-SGQVLJ32.js?v=87798ed6:6449 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6204 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateChildren @ chunk-SGQVLJ32.js?v=87798ed6:6408 hydrateElement @ chunk-SGQVLJ32.js?v=87798ed6:6314 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6219 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateChildren @ chunk-SGQVLJ32.js?v=87798ed6:6408 hydrateElement @ chunk-SGQVLJ32.js?v=87798ed6:6314 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6219 hydrateChildren @ chunk-SGQVLJ32.js?v=87798ed6:6408 hydrateElement @ chunk-SGQVLJ32.js?v=87798ed6:6314 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6219 hydrateChildren @ chunk-SGQVLJ32.js?v=87798ed6:6408 hydrateElement @ chunk-SGQVLJ32.js?v=87798ed6:6314 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6219 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateChildren @ chunk-SGQVLJ32.js?v=87798ed6:6408 hydrateElement @ chunk-SGQVLJ32.js?v=87798ed6:6314 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6219 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateSuspense @ chunk-SGQVLJ32.js?v=87798ed6:3165 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6274 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateChildren @ chunk-SGQVLJ32.js?v=87798ed6:6408 hydrateElement @ chunk-SGQVLJ32.js?v=87798ed6:6314 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6219 hydrateChildren @ chunk-SGQVLJ32.js?v=87798ed6:6408 hydrateElement @ chunk-SGQVLJ32.js?v=87798ed6:6314 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6219 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateSuspense @ chunk-SGQVLJ32.js?v=87798ed6:3165 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6274 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateChildren @ chunk-SGQVLJ32.js?v=87798ed6:6408 hydrateElement @ chunk-SGQVLJ32.js?v=87798ed6:6314 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6219 hydrateChildren @ chunk-SGQVLJ32.js?v=87798ed6:6408 hydrateElement @ chunk-SGQVLJ32.js?v=87798ed6:6314 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6219 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6238 hydrateSuspense @ chunk-SGQVLJ32.js?v=87798ed6:3165 hydrateNode @ chunk-SGQVLJ32.js?v=87798ed6:6274 hydrateSubTree @ chunk-SGQVLJ32.js?v=87798ed6:7440 componentUpdateFn @ chunk-SGQVLJ32.js?v=87798ed6:7460 run @ chunk-SGQVLJ32.js?v=87798ed6:435 instance.update @ chunk-SGQVLJ32.js?v=87798ed6:7597 setupRenderEffect @ chunk-SGQVLJ32.js?v=87798ed6:7607 mountComponent @ chunk-SGQVLJ32.js?v=87798ed6:7375 await in mountComponent（异步） （匿名） @ entry.js:66 显示另外 201 个框架 收起