vue如何用element做一个多级目录树

知识点：组件可以自身引用，采用该方法可以通过条件判断完成递归调用。

element组件:NavMenu 导航菜单 el-submenu el-menu-item

一、新建组件，方便递归调用。

1.template

<template>
  <div>
    <template v-for="item in data">
      <template v-if="item.child && item.child.length > 0">
        <el-submenu :key="item.id" :index="item.id">
          <template slot="title">
            <span @click="showContent(item)">{{ item.name }}</span>
          </template>
          <Moduletree :data='item.child'></Moduletree>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item :key="item.id" :index="item.id">
          <i class="el-icon-menu"></i>
          <span slot="title" @click="showContent(item)">{{ item.name }}</span>
        </el-menu-item>
      </template>
    </template>
  </div>
</template>

2.script

<script>
export default {
    name: 'BdjwPlanWebModuletree',

    data() {
        return {
            
        };
    },
//这里是要接受的参数，从父组件发送
    props:['data'],
    mounted() {
        
    },

    methods: {
        
    },
};
</script>

组件已经完成。

二、父组件传值

1.父组件引入

import Tree from '../programmer/component/moduleTree.vue'

2.在script中注册

components:{
      Tree
  },

3.调用，开始循环

<Tree :data='goal'></Tree>