用vue20封装一个树形导航栏要能实现el-menu的功能

创建一个TreeMenu组件

<template>
  <el-menu :default-active="defaultActive" :unique-opened="uniqueOpened" class="el-menu-vertical-demo" :collapse="collapse">
    <template v-for="item in menuData">
      <template v-if="item.children">
        <el-submenu :index="item.index">
          <template slot="title">{{ item.label }}</template>
          <tree-menu :menu-data="item.children" :default-active="defaultActive" :unique-opened="uniqueOpened" :collapse="collapse"></tree-menu>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item :index="item.index">{{ item.label }}</el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    menuData: {
      type: Array,
      default: () => {
        return []
      }
    },
    defaultActive: {
      type: String,
      default: ''
    },
    uniqueOpened: {
      type: Boolean,
      default: true
    },
    collapse: {
      type: Boolean,
      default: false
    }
  }
}
</script>

在父组件中使用TreeMenu组件

<template>
  <tree-menu :menu-data="menuData"></tree-menu>
</template>

<script>
import TreeMenu from '@/components/TreeMenu'

export default {
  name: 'NavMenu',
  components: { TreeMenu },
  data() {
    return {
      menuData: [
        {
          index: '1',
          label: '一级菜单1',
          children: [
            {
              index: '1-1',
              label: '二级菜单1-1'
            },
            {
              index: '1-2',
              label: '二级菜单1-2'
            }
          ]
        },
        {
          index: '2',
          label: '一级菜单2',
          children: [
            {
              index: '2-1',
              label: '二级菜单2-1'
            },
            {
              index: '2-2',
              label: '二级菜单2-2'
            }
          ]
        }
      ]
    }
  }
}
</script>

使用父组件中的数据渲染TreeMenu

<template>
  <el-menu :default-active="defaultActive" :unique-opened="uniqueOpened" class="el-menu-vertical-demo" :collapse="collapse">
    <template v-for="item in menuData">
      <template v-if="item.children">
        <el-submenu :index="item.index">
          <template slot="title">{{ item.label }}</template>
          <tree-menu :menu-data="item.children" :default-active="defaultActive" :unique-opened="uniqueOpened" :collapse="collapse"></tree-menu>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item :index="item.index">{{ item.label }}</el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    menuData: {
      type: Array,
      default: () => {
        return []
      }
    },
    defaultActive: {
      type: String,
      default: ''
    },
    uniqueOpened: {
      type: Boolean,
      default: true
    },
    collapse: {
      type: Boolean,
      default: false
    }
  }
}
</script>