快乐玩前端：关于Antd3导航收缩后图标右侧出现箭头问题

关于Antd3导航收缩后图标右侧出现箭头问题

项目开发过程中总会遇见各种各样奇奇怪怪的bug，今天小编遇到了一个和Antd3导航收缩后图标右侧出现箭头问题：

正常情况下，Antd3导航收缩后图标应该是这样的：

然后反反复复的检查，发现代码都是对的，通过开发者工具也检查了一次，与官网的代码也做了对比，发现除了导航栏每一行多了div，其他都没啥大问题，感觉多了个div应该问题不大，然后又反反复复的看了代码，最后拿去和以前写的做对比，发现还是div的问题，然后把div干掉以后，图标就恢复正常了，很显然，问题就是应为多加了个div。

<!--最开始有问题的代码 -->
<template>
    <div class="mj-menu-item">
        <template v-for="items in menus">
            <template v-if="items.meta.display">
                <a-menu-item v-if="!items.children" :key="items.path">
                    <template #icon v-if="items.meta.icon">
                        <svg-icon :icon_name="items.meta.icon" />
                    </template>
                    {{ items.meta.text }}
                </a-menu-item>
                <a-sub-menu v-else :key="items.path">
                    <template #icon v-if="items.meta.icon">
                        <svg-icon :icon_name="items.meta.icon" />
                    </template>
                    <template #title>{{ items.meta.text }}</template>
                    <mj-menu-item :menus="items.children" />
                </a-sub-menu>
            </template>
        </template>
    </div>
</template>

<!--修改后的代码 -->
<template>
	<!-- 把这里的div干掉 -->
    <template v-for="items in menus">
        <template v-if="items.meta.display">
            <a-menu-item v-if="!items.children" :key="items.path">
                <template #icon v-if="items.meta.icon">
                    <svg-icon :icon_name="items.meta.icon" />
                </template>
                {{ items.meta.text }}
            </a-menu-item>
            <a-sub-menu v-else :key="items.path">
                <template #icon v-if="items.meta.icon">
                    <svg-icon :icon_name="items.meta.icon" />
                </template>
                <template #title>{{ items.meta.text }}</template>
                <mj-menu-item :menus="items.children" />
            </a-sub-menu>
        </template>
    </template>
</template>

学习分享，一起成长！以上为小编的经验分享，若存在不当之处，请批评指正！