ant-design-vue menu菜单递归

<template>
    <div class="LeftSubmenu">
        <a-menu :default-selected-keys="['1']" :default-open-keys="['2']" mode="inline" theme="dark"
            :inline-collapsed="collapsed">
            <template v-for="item in list">
                <a-menu-item v-if="!item.children" :key="item.key">
                    <a-icon type="pie-chart" />
                    <span>{{ item.title }}</span>
                </a-menu-item>
                <sub-menu v-else :key="item.key" :menu-info="item" />
            </template>
        </a-menu>
    </div>
</template>

<script>
import { Menu } from 'ant-design-vue';
const SubMenu = {
    template: `
      <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
        <span slot="title">
          <a-icon type="mail" /><span>{{ menuInfo.title }}</span>
        </span>
        <template v-for="item in menuInfo.children">
          <a-menu-item v-if="!item.children" :key="item.key">
            <a-icon type="pie-chart" />
            <span>{{ item.title }}</span>
          </a-menu-item>
          <sub-menu v-else :key="item.key" :menu-info="item" />
        </template>
      </a-sub-menu>
    `,
    name: 'SubMenu',
    isSubMenu: true,
    props: {
        ...Menu.SubMenu.props,
        menuInfo: {
            type: Object,
            default: () => ({}),
        },
    },
};
export default {
    name: "leftMenu",
    components: {
        'sub-menu': SubMenu,
    },
    data() {
        return {
            collapsed: false,
            list: [
                {
                    key: '1',
                    title: 'Option 1',
                },
                {
                    key: '2',
                    title: 'Navigation 2',
                    children: [
                        {
                            key: '2.1',
                            title: 'Navigation 3',
                            children: [{ key: '2.1.1', title: 'Option 2.1.1' }],
                        },
                    ],
                },
            ],
        };
    },
    watch: {
        openKeys(val) {
            console.log('openKeys', val);
        },
    },
    methods: {
        select({ item, key, selectedKeys }) {
            console.log(key, selectedKeys);
        },
        clickMenuTitle(item) {
            console.log(item);
        },
        handleClick(e) {
            console.log('click', e);
        },
        titleClick(e) {
            console.log('titleClick', e);
        },
    },
};
</script>
<style lang="less">
.LeftSubmenu {
    width: 2.5rem;
    height: calc(100vh - 0.7rem);

}
</style>
<style>
.LeftSubmenu .ant-menu-root {
    width: 100%;
    height: 100%;
    padding-top: 0.1rem;
}
</style>
  

如果报编译错误，可以试试在vue.config.js中加上

module.exports = {
  runtimeCompiler:true, //加上这句
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/'
}