Vue中如何递归渲染树形数据生成DOM节点？-css教程-PHP中文网

Vue中如何递归渲染树形数据生成DOM节点？

心靈之曲

发布： 2025-02-23 14:38:10

原创

561人浏览过

vue中如何递归渲染树形数据生成dom节点？

Vue.js递归组件实现树形数据DOM渲染

在Vue.js中，利用递归组件可以高效地将树形数据渲染成DOM节点。假设我们有如下树形数据结构：

<code class="javascript">{
  name: 'a',
  children: [
    { name: 'b', children: [ { name: 'c', children: [ { name: 'd', children: [] } ] } ] },
    { name: 'e', children: [] }
  ]
}</code>

登录后复制

目标是将其渲染成嵌套的<div>结构： <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><code class="html"><div> a <div> b <div> c <div>d</div> </div> </div> <div>e</div> </div></code></pre>

登录后复制

</div>
<p><strong>解决方案：创建递归组件</strong></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>我们可以创建一个名为<code>TreeItem

的递归组件来实现这个功能。该组件接收一个node属性，表示当前节点的数据。

AI卡通生成器

免费在线AI卡通图片生成器 | 一键将图片或文本转换成精美卡通形象

查看详情

<code class="vue"><template>
  <div>
    {{ node.name }}
    <TreeItem v-for="child in node.children" :key="child.name" :node="child" />
  </div>
</template>

<script>
export default {
  name: 'TreeItem',
  props: {
    node: {
      type: Object,
      required: true
    }
  }
};
</script></code>

登录后复制

在这个组件中：