vue左侧菜单,树形图递归实现代码

下面我将详细讲解vue左侧菜单、树形图递归实现的完整攻略。

一、什么是递归

在开始讲解之前，我们需要了解什么是递归。递归是指通过函数体内调用自己的方式，重复执行某段代码的过程。

二、vue左侧菜单代码实现

1. 父组件

我们需要先创建一个父组件，来渲染整个左侧菜单。

<template>
  <div class="menu">
    <template v-for="item in menus">
      <tree-node :item="item" @on-click="childClick"></tree-node>
    </template>
  </div>
</template>
<script>
  import TreeNode from './TreeNode'
  export default {
    name: 'SideMenu',
    components: {
      TreeNode
    },
    data() {
      return {
        menus: [
          {
            "name": "dashboard",
            "icon": "el-icon-menu",
            "title": "Dashboard",
            "children": []
          },
          {
            "name": "user",
            "icon": "el-icon-user",
            "title": "User Management",
            "children": [
              {
                "name": "user-list",
                "path": "/user/list",
                "title": "User List",
                "children": []
              },
              {
                "name": "user-add",
                "path": "/user/add",
                "title": "Add User",
                "children": []
              },
              {
                "name": "user-edit",
                "path": "/user/edit",
                "title": "Edit User",
                "children": []
              }
            ]
          }
        ]
      }
    },
    methods: {
      childClick(e) {
        this.$emit('on-click', e)
      }
    }
  }
</script>

2. 子组件

接下来，我们需要创建一个子组件，来实现递归式的渲染。

<template>
  <div class="tree-node">
    <el-tooltip :content="item.title">
      <span class="menu-item" @click="clickHandler(item)">
        <i :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </span>
    </el-tooltip>
    <template v-if="item.children && item.children.length">
      <tree-node v-for="child in item.children" :key="child.name" :item="child" @on-click="clickHandler"></tree-node>
    </template>
  </div>
</template>
<script>
  export default {
    name: 'TreeNode',
    props: {
      item: {
        type: Object
      }
    },
    methods: {
      clickHandler(item) {
        this.$emit('on-click', item)
      }
    }
  }
</script>

这里我们来简单解释下子组件的递归渲染方式。

首先，我们通过v-if判断当前节点是否有子节点，如果有，则通过v-for循环渲染子节点。

接着，我们通过递归调用tree-node组件来渲染子节点，这样就能轻松实现递归效果。

三、树形图递归实现代码

接下来，我们来看看vue中如何通过递归实现树形图。

1. 父组件

我们需要先创建一个父组件，来渲染整个树形图。

<template>
  <div class="tree-view">
    <ul>
      <tree-node :item="root"></tree-node>
    </ul>
  </div>
</template>
<script>
  import TreeNode from './TreeNode'
  export default {
    name: 'TreeView',
    components: {
      TreeNode
    },
    data() {
      return {
        root: {
          name: 'Root',
          children: [
            {
              name: 'Child1',
              children: [
                { name: 'Grandchild1' },
                { name: 'Grandchild2' }
              ]
            },
            {
              name: 'Child2',
              children: [
                { name: 'Grandchild3' },
                { name: 'Grandchild4' }
              ]
            }
          ]
        }
      }
    }
  }
</script>

2. 子组件

接下来，我们需要创建一个子组件，来实现递归式的渲染。

<template>
  <li>
    {{ item.name }}
    <template v-if="item.children && item.children.length">
      <ul>
        <tree-node v-for="child in item.children" :key="child.name" :item="child"></tree-node>
      </ul>
    </template>
  </li>
</template>
<script>
  export default {
    name: 'TreeNode',
    props: {
      item: {
        type: Object
      }
    }
  }
</script>

这里我们来简单解释下子组件的递归渲染方式。

首先，我们通过v-if判断当前节点是否有子节点，如果有，则通过v-for循环渲染子节点。

接着，我们通过递归调用tree-node组件来渲染子节点，这样就能轻松实现递归效果。

在上面的例子中，我们通过定义一个root对象来表示整个树形图的根节点，然后通过递归调用tree-node组件来渲染整个树形图。

四、总结

以上就是vue左侧菜单、树形图递归实现的完整攻略。通过以上两个实例，我们可以看出递归是一个非常强大的功能，可以在很多场景下起到重要作用，同时也能提高代码效率，简化代码结构。

阅读剩余 77%