Ant Design Vue侧边栏收缩的一个小坑~

你们好，我是金金金。

场景

我的

官方文档例子

• 侧边栏收缩状态下，可以看见我的项目 竟然多个… 和 一个箭头，和官方文档的例子显然不一样

排查

排查之前我先贴一下代码

• index.vue
  

• SiderMenu.vue
  

• SiderMenuItem.vue
  

我大概捋一下我这的思路，我是在侧边栏组件里面拆分放了2个子组件

1. 侧边栏的logo组件
2. 侧边栏的菜单组件

• 重点在菜单组件里面，可以很清晰的看见我是在a-menu这个标签里面写了一个sider-menu-item组件，我这里是把数据都传给sider-menu-item组件，sider-menu-item组件去处理数据以及渲染菜单。

我有多次对比文档中的例子、也有f12检查元素，文档中的例子收缩状态下是没问题的，不过文档的例子没有拆分出子组件，然后我猜想问题是不是出在sider-menu-item组件上，我sider-menu-item组件最外层是一个div标签包裹起来，我尝试把最外层的div标签去掉，惊奇的发现 箭头和省略号竟然没了，说明确实这里有问题，不过又发现多了好几个菜单，这是因为我div上面的判断条件就是hidden属性为ture的不显示，所以需要将最外层的div标签替换成template标签

造成error的原因

1. sider-menu-item组件最外层div标签所导致
2. icon组件和title不能写一个span标签里面

解决

• 我们知道导致问题的原因是sider-menu-item组件最外层的div标签导致，我们改成template标签即可。
  

问题得以解决，又发现一个新问题，怎么多出来个文字呢？问题立马锁定在渲染标题这一块的标签，我再次对比了文档中的例子

• 咱们改一下代码，效果正确。问题解决。

总结

主要是sider-menu-item组件最外层div标签影响到了样式，再者就是细心问题，我把icon组件和title写在一个span标签里面所导致。

• 编写有误还请大佬指正，万分感谢。