vue2 antdesign menu 渲染多级菜单

• 示例数据

//path 自行配置
const menu = [
  {
    title: '示例1',
    icon: 'laptop',
    path: '',
    children: [
      {
        title: '示例1-1',
        icon: 'laptop',
        path: ''
      },
      {
        title: '示例1-2',
        icon: 'laptop',
        path: ''
      }
    ]
  }
  {
    title: '示例2',
    icon: 'laptop',
    path: '',
    children: [
      {
        title: '示例2-1',
        icon: 'laptop',
        path: '',
        children: [
	      {
	        title: '示例2-1-1',
	        icon: 'laptop',
	        path: ''
	      }
	    ]
      }
    ]
  }]

• sidebar.vue

<template>
    <div class="sidebar-con">
        <a-menu
            mode="inline"
            theme="dark"
            :openKeys="openKeys"
            :selectedKeys="keyarrs"
            @openChange="onOpenChange"
            :style="{ height: '100%', borderRight: 0 }"
        >
            <template v-for="item in menu">
                <template v-if="!('children' in item)">
                    <a-menu-item :key="item.path">
                        <router-link :to="{ path: item.path }">
                            <a-icon type="laptop" />
                            <span>{{ item.title }}</span>
                        </router-link>
                    </a-menu-item>
                </template>
                <template v-else>
                    <side-item v-if="item.children.length" :key="item.path" :info="item" />
                    <a-sub-menu v-if="!item.children.length" :key="item.path">
                        <a-icon type="laptop" />
                        <span>{{ item.title }}</span>
                    </a-sub-menu>
                </template>
            </template>
        </a-menu>
    </div>
</template>

• sidebar.vue

<script>
import SideItem from './sideitem'
export default {
    name: 'cus-menu',
    props: {
        menu: {
            type: Array, //菜单数据
        },
        openKeys: {
            type: Array,  //默认展开哪个菜单，我这里是全部展开(业务需要)，也可以设置展开一个，自行配置,使用path做key。
        }
    },
    components: {
        SideItem
    },
    methods: {
   		//点击菜单的回调
        onOpenChange(opens) {
        //opens 会返回菜单数据
            this.$emit('changeMenu', opens);
        },
    }
}
</script>

• sideitem.vue

<template functional>
    <a-sub-menu :key="props.info.path">
        <span slot="title">
            <a-icon :type="props.info.icon" v-if="props.info.icon != ''"/><span>{{ props.info.title }}</span>
        </span>
        <template v-for="item in props.info.children">
            <template v-if="!('children' in item)">
                <a-menu-item :key="item.path">
                    <router-link :to="{ path: item.path }">
                        <span>{{ item.title }}</span>
                    </router-link>
                </a-menu-item>
            </template>
            <template v-else>
                <side-item v-if="item.children.length" :key="item.path" :info="item" />
                <a-menu-item v-if="!item.children.length" :key="item.path">
                    <router-link :to="{ path: item.path }">
                        <span>{{ item.title }}</span>
                    </router-link>
                </a-menu-item>
            </template>
        </template>
    </a-sub-menu>
</template>

<script>
export default {
    name: 'side-item',
    props: ['info']
}
</script>