基于ant design vue实现的多层菜单组件封装

菜单组件

不同于树组件的是，树组件可以选很多个，而菜单组件只可以选择一个

这里放上我的源代码
current 是默认选择的节点，是一个数组current: [‘5.3.1’], // 默认选择的节点
openKeys是默认展开的节点，也是一个数组openKeys: [‘5’, ‘5.3’], // 默认展开的树大类

    <!-- 数据菜单 -->
  	<!-- 这里面只写到了第四层，你需要用到多少，按照我这个格式续写下去就行，他的核心就是如果下面还有一层，那么他只能是这个标签a-sub-menu，只有根节点才能用这个标签a-menu-item!-->
    <a-menu
      style="width: 100%;min-height: 340px;"
      :default-selected-keys="current" 
      :open-keys.sync="openKeys"
      mode="inline"
      @click="switchMenu"
    >
      <template v-for="item in tree">
        <a-sub-menu :key="item.key">
        	<!--iconfont是我引入了阿里的图标库，你可以写你自己的，不需要也按照我这样写 -->
          <span slot="title"><icon-font :type="item.icon"></icon-font><span>{{item.name}}</span></span>
          <template v-for="inItem in item.children" >
            <!-- 二层没孩子的 -->
            <a-menu-item v-if="!inItem.children"  :disabled="inItem.disabled" :key="inItem.key">
              {{inItem.name}}
            </a-menu-item>
            <!-- 二层有孩子的 -->
            <a-sub-menu v-if="inItem.children"  :key="inItem.key">
              <span slot="title"><span>{{inItem.name}}</span></span>
              <template v-for="inItemTwo in inItem.children" >
                <!-- 三层没孩子的 -->
                <a-menu-item v-if="!inItemTwo.children" :disabled="inItemTwo.disabled"  :key="inItemTwo.key">
                  {{inItemTwo.name}}
                </a-menu-item>
                <!-- 三层有孩子的 -->
                <a-sub-menu v-if="inItemTwo.children"  :key="inItemTwo.key">
                    <span slot="title"><span>{{inItemTwo.name}}</span></span>
                    <template v-for="inItemThree in inItemTwo.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>```

switchMenu的回调函数

	// 这里只能拿到他的key，包含在e里面
   switchMenu (e) {
      console.log(e)
    },

输入节点，拿节点所有信息

   getTreeNoteInfo (key) {
      this.chooseValue = {}  // 这是我想要拿到的节点信息，一层一层的对比key去找
      this.tree.forEach(item => {
        item.children.forEach(inItem => {
          // 第二层有数据的
          if (inItem.key === key) {
            this.chooseValue = JSON.parse(JSON.stringify(inItem))
          } else {
            if (inItem.children) {
              inItem.children.forEach(inItemTwo => {
                // 第三层有数据
                if (inItemTwo.key === key) {
                  this.chooseValue = JSON.parse(JSON.stringify(inItemTwo))
                } else {
                  if (inItemTwo.children) {
                    inItemTwo.children.forEach(inItemThree => {
                      // 第四层有数据的
                      if (inItemThree.key === key) {
                        this.chooseValue = JSON.parse(JSON.stringify(inItemThree))
                      }
                    })
                  }
                }
              })
            }
          }
        })
      })
    }

树的配置信息，就是这样的格式

      tree = [
        {
          key: '1',
          icon: ' ',
          name: '基础',
          children: [
            {
              key: '1.1',
              name: '交通',
              type: 'traffic',
              disabled: true
            }
          ]
        }
      ],```