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

bushichengxuyuana

于 2022-03-23 10:26:05 发布

阅读量2.3k

点赞数 1

分类专栏：我的新能力文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_43997182/article/details/123678970

版权

我的新能力专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用Vue创建一个名为`Moduletree`的组件，用于展示递归的导航菜单。组件内部通过v-for指令遍历数据，并根据child属性进行条件判断，使用el-submenu和el-menu-item元素来呈现层级结构。当child存在且长度大于0时，递归调用自身显示子菜单；否则，显示为一级菜单项。在父组件中，通过将数据传递给`Moduletree`组件来实现菜单的动态渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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>