vue2 关于antDesign a-menu 递归子组件的实践

vue2 实现 a-menu 深层级组件递归

方法1 写.vue组件实现 这种方法和elementui的比较相似

// 子组件  1.注意必须声明为 functional   2.functional的vue组件父子传参props取值要带着props
<template functional>
  <a-sub-menu >
    <span slot="title">{{ props.menuInfo.title }}</span>
      <template  v-for="item in props.menuInfo.children">
        <a-menu-item v-if="!item.children" :key="item.key">
          {{ item.title }}
        </a-menu-item>
        <sub-menu v-else :menuInfo="item" :key="item.key" />
      </template>

  </a-sub-menu>
</template>

<script>
export default {
  name: 'SubMenu',
  props: {
    menuInfo: {
      type: Object,
      required: true
    }
  },
  created () {
    console.log(this.props.menuInfo, 123)
  }
}
</script>

// 父组件
<template>
  <div class="left-menu">
    <a-menu
      :defaultSelectedKeys="['1']"
      :defaultOpenKeys="['2']"
      mode="inline"
      theme="dark"
      :inlineCollapsed="collapsed"
    >
      <template v-for="item in list">
        <a-menu-item v-if="!item.children" :key="item.key">
          {{ item.title }}
        </a-menu-item>
        <sub-menu v-else :menuInfo="item" :key="item.key" />
      </template>
    </a-menu>
  </div>
</template>

<script>
import SubMenu from './SubMenu.vue'
// import { Menu } from 'ant-design-vue'

export default {
  components: { 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' }]
            }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>
.left-menu {
  width: 200px;
  height: 100vh;
}
</style>

2.从网上找的第二种方案 也可以实现 如果报编译错误，可以试试在vue.config.js中加上

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

　　

// 从网上找的第二种方案 也可以实现
<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>