vue + elementUI 树形菜单的递归组件

应该很多同学都会灵活的使用递归吧，相信大家用的一定 66 的… ╰(°▽°)╯
很多朋友写vue 组件也是66的。 ╰(°▽°)╯

但是今天，我们把它结合起来，做一个 vue 的递归组件…

一、需求：

一个不知道会嵌套多少次的树形菜单，如果用 if 一层一层往下判断的话那真是要了命了，不灵活不易维护不说，还最容易出错。
比如像下面这种树形结构：

如果里面有九层十几层，我们也需要一级一级的判断吗？ [○･｀Д´･ ○] ， 答案肯定是不能的！

二 、规划
有人说用 js 我们可以灵活地写出这个递归函数，但是在vue 里，它是双向绑定的，不能手动操作dom，那么如何用递归来做这个菜单呢？
答案是： 递归组件！ (╹▽╹)

1. 在父组件中：

<!-- html element-ui 的树形菜单控件 -->
<el-menu
   :default-active="defaultactive"
   mode="horizontal"
   @select="handleSelect"
   text-color="#666"
 >
    <!-- element-ui 默认显示的菜单名称  ！-->
    <el-menu-item
      index=""
      key=""
    >全部</el-menu-item>
     <!-- 调用树形递归组件 -->
    <tree :nodeList='plat.childList'></tree>
 </el-menu>

// typescript 格式
import Component from "vue-class-component"; // 引入 ts Component  组件装饰器 
import Tree from '../../components/common/tree.vue' // 引入树形递归组件
@Component({
	Tree 
})
firstName :string = '选择平台';
projectList: Array<any> = [
	{
		name:'1级-1',
		id: 'f1',
		childList:[
			{
				name:'1级-1-1',
				id: 's1',
			},
			{
				name:'1级-2-1',
				id: 't1',
				childList:{
					{
						name:'1级-3-1',
						id: 'ff1',
					},
					{
						name:'1级-3-2',
						id: 'ff2',
						
					}
				}
			},
			{
				name:'1级-1-2',
				id: 's2',
			}
		},
		{
			name:'1级-2',
			id: 'f2',
		}
	]
];
handleSelect(query){
	// 此处写点击某一层菜单时的操作
}

2. 在子组件中：

<!-- 遍历子组件 -->
<template v-for='nodeInfo in nodeList'>
	<!-- 如果当前有子菜单，则显示 el-submenu ，在el-subment 里调用 递归组件 -->
    <el-submenu
      v-if='nodeInfo.childList.length>0'
      :index='nodeInfo.name'
      :key="nodeInfo.id"
    >
      <template slot="title">{{nodeInfo.name}}</template>
      <el-menu-item
        index=""
        key=""
      >全部</el-menu-item>
      <!-- 调用自身  此处是重点-->
      <tree :nodeList='nodeInfo.childList'></tree>
        
    </el-submenu>
    <!-- 如果没有子菜单，则显示当前内容 -->
    <el-menu-item
      v-else
      :index='nodeInfo.name'
      :key='nodeInfo.id'
    >{{nodeInfo.name}}</el-menu-item>

</template>

// 子组件 ts
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator"; // 引入 component 和 prop 装饰器

@Component({
	name "tree"; // name是必须要有的哈
})
export default class Tree extends Vue {
  @Prop({
    type: Array,
    required: true
  })
  nodeList!: any[];

}

这样，就妥妥的啦！ ╰(°▽°)╯

如果有不懂或者不明白的地方欢迎提问题哈，还有本文有不正确的地方，或者是需要改进的请一定要跟我沟通哦~
我们一起进步！ ε≡٩(๑>₃<)۶