基于Ant Design of Vue的级联导航菜单组件

1.显示效果如图

2.数据格式

3.组件代码

<template>
    <!-- 数据菜单 -->
  	<!-- 这里面只写到了第四层，
      需要用到多少，按照这个格式
      续写下去就行，核心就是如果
      下面还有一层，那么他只能是
      这个标签a-sub-menu，只有根
      节点才能用这个标签a-menu-item!
      另外感觉可以优化的地方是可以将
      template单独封装成组件，item.children作为组件值
    -->
    <a-menu
      ref="menu"
      style="width: 100%;min-height: 340px;"
      mode="horizontal"
      @click="switchMenu"
    >
      <template v-for="item in menuInfo">
        <a-sub-menu :key="item.id">
          <span slot="title">
            <span>{{item.meta.title}}</span>
          </span>
          <template v-for="inItem in item.children" >
            <!-- 二层没children子级 -->
            <a-menu-item v-if="!inItem.children"  :disabled="inItem.disabled" :key="inItem.id">
                <app-link :to="item.path + '/' + inItem.path">
                    {{inItem.meta.title}}
                </app-link>
            </a-menu-item>
            <!-- 二层有children子级 -->
            <a-sub-menu v-if="inItem.children" :key="inItem.id">
              <span slot="title"><span>{{inItem.meta.title}}</span></span>
              <template v-for="inItemTwo in inItem.children" >
                <!-- 三层没children子级 -->
                <a-menu-item v-if="!inItemTwo.children" :disabled="inItemTwo.disabled"  :key="inItemTwo.id">
                  <a :href="inItem.path + '/' + inItemTwo.path" target ="_blank" >
                    {{inItemTwo.meta.title}}
                  </a>
                </a-menu-item>
                <!-- 三层有children子级 -->
                <!--<a-sub-menu v-if="inItemTwo.children"  :key="inItemTwo.id">
                    <span slot="title">
                      <span>
                          {{inItemTwo.meta.title}}
                      </span>
                    </span>
                     <template v-for="inItemThree in inItemTwo.children"> -->
                      <!-- 四层没children子级 -->
                      <!-- <a-menu-item v-if="!inItemThree.children" :disabled="inItemThree.disabled"  :key="inItemThree.key">
                        {{inItemThree.name}}
                      </a-menu-item>
                    </template> 
                </a-sub-menu>-->
              </template>
            </a-sub-menu>
          </template>
        </a-sub-menu>
      </template>
    </a-menu>
</template>
<script>
  import AppLink from './Link'
  export default {
    name: 'subMenu',
    components: {
        AppLink
    },
    props: {
        // ...Menu.SubMenu.props,
        menuInfo: {
            type: Array,
            default: () => [],
        },
    },
    data(){
      return{
        chooseValue: {},
      }
    },
    created(){
      console.log(this.menuInfo)
    },
    methods:{
      	// 这里只能拿到他的key，包含在e里面
      switchMenu (e) {
          // this.getTreeNoteInfo(e.key)
          console.log(e)
      },
      //测试递归处理数据，此处需求无用，可忽略
      getTreeNoteInfo (key) {
        console.log(key)
        this.chooseValue = {}  // 这是我想要拿到的节点信息，一层一层的对比key去找
        this.menuInfo.forEach((item) => {
          item.children.forEach(inItem => {
            // 第二层有数据的
            if (inItem.id === key) {
              this.chooseValue = JSON.parse(JSON.stringify(inItem))
            } else {
              if (inItem.children) {
                inItem.children.forEach(inItemTwo => {
                  // 第三层有数据
                  if (inItemTwo.id === key) {
                    this.chooseValue = JSON.parse(JSON.stringify(inItemTwo))
                  } else {
                    if (inItemTwo.children) {
                      inItemTwo.children.forEach(inItemThree => {
                        // 第四层有数据的
                        if (inItemThree.id === key) {
                          this.chooseValue = JSON.parse(JSON.stringify(inItemThree))
                        }
                      })
                    }
                  }
                })
              }
            }
          })
        })
      }
    }
  }

</script>
<style lang="less" scoped>
  .navlist ul{ margin-right: 20px; }
  .ant-menu-light{ min-height: auto !important;}
  .ant-menu-horizontal{ background: #3E6CD6; color: #fff; border: 0; }
  .ant-menu-submenu-title:hover{ border: none }
  .ant-menu-horizontal > .ant-menu-item:hover, .ant-menu-horizontal > .ant-menu-submenu:hover, .ant-menu-horizontal > .ant-menu-item-active, .ant-menu-horizontal > .ant-menu-submenu-active, .ant-menu-horizontal > .ant-menu-item-open, .ant-menu-horizontal > .ant-menu-submenu-open, .ant-menu-horizontal > .ant-menu-item-selected, .ant-menu-horizontal > .ant-menu-submenu-selected{
    border-bottom: 2px solid #3E6CD6; color: #fff;
  }
</style>

4.父级组件引用