Vue -递归插入<div>

<template>
  <div>
    <ul>
      <li v-for="node in treeData" :key="node.id">
        {{ node.name }}
        <tree-component v-if="node.children && node.children.length" :tree-data="node.children" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeComponent',
  props: {
    treeData: Array
  }
}
</script>

// 示例：限制递归深度
export default {
  name: 'TreeComponent',
  props: {
    treeData: Array,
    maxDepth: {
      type: Number,
      default: 10
    }
  },
  methods: {
    renderNode(node, depth) {
      if (depth > this.maxDepth) return;
      // 渲染逻辑
    }
  }
}

<template>
  <div>
    <virtual-scroller :items="treeData" item-height="30">
      <template v-slot:default="{ item }">
        <li>
          {{ item.name }}
          <tree-component v-if="item.children && item.children.length" :tree-data="item.children" />
        </li>
      </template>
    </virtual-scroller>
  </div>
</template>

<script>
import VirtualScroller from 'vue-virtual-scroller'

export default {
  components: {
    VirtualScroller
  },
  props: {
    treeData: Array
  }
}
</script>