Principle 1.

2. Code implementation

//Node.vue
<template>
  <div>
    <h3>{{ data.name }}</h3>
    <! -- Conditional nesting -->
    <Node v-for="n in data.children" :key="n.name" :data="n"> </Node>
  </div>
</template> <script>
export default {
  name: "Node".// Name is necessary for recursive components
  props: {
    data: {
      type: Object.require: true,}}};</script>

//NodeTest.vue
<template>
  <div><Node :data="folder"></Node></div>
</template> <script>
import Node from "@/Node.vue";
export default {
  components: {
    Node,
  },
  data() {
    return {
      // Data in a tree structure
      folder: {
        name: "vue-study".children: [{name: "Level 1 folder A".children: [{ name: "Secondary folder"}]}, {name: "Level 1 folder B"},],}}; }};</script>
Copy the code

3. Tree menu implementation

//index.vue
<template>
  <Tree :data="treeData"></Tree>
</template>

<script>
import Tree from "@/components/recursion/Tree.vue";
export default {
  data() {
    return {
      treeData: [{title: "Root node".children: [{title: "AAA level"
            },
            {
              title: Level "BBBB".children: [{title: "Secondary 11"
                },
                {
                  title: "Secondary 22"}]}, {title: Level "CCC".children: [{title: "Secondary 666".expand: true.children: [{title: "Three 111"
                    },
                    {
                      title: "Three 222"
                    },
                    {
                      title: "Three 333"}]}, {title: "Secondary 777".children: [{title: "Three 888"
                    },
                    {
                      title: "Three 999"}]},]}]}; },components: {
    Tree
  }
};
</script>

//Tree.vue
<template>
  <div class="tree">
    <TreeNode v-for="item in data" :key="item.title" :model="item"></TreeNode>
  </div>
</template>

<script>
import TreeNode from "@/components/recursion/TreeNode.vue";
export default {
  props: {
    data: {
      type: Array.required: true}},components: {
    TreeNode
  }
};
</script>

<style scoped>
.tree {
  text-align: left;
}
</style>

//TreeNode.vue
<template>
  <div>
    <div @click="toggle" :style="{paddingLeft: (level-1)+'em'}">
      <label>{{model.title}}</label>      
      <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
    </div>
    <div v-show="open" v-if="isFolder">
      <tree-node class="item" v-for="model in model.children" 
        :model="model" :key="model.title"
        :level="level + 1"></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: "tree-node".props: {
    model: Object.level: {
      type: Number.default: 1}},data: function() {
    return {
      open: false
    };
  },
  computed: {
    isFolder: function() {
      return this.model.children && this.model.children.length; }},methods: {
    toggle: function() {
      if (this.isFolder) {
        this.open = !this.open; }}}};</script>

Copy the code