javascript - 前端Vue如何实现类似于下图中组织架构等级图，根据后端返回来的数据动态展示？

Question

前端Vue如何实现类似于下图中组织架构等级图，根据后端返回来的数据动态展示？

Answer 1

antv x6 可以搞定：https://x6.antv.antgroup.com/examples/showcase/practices/#org

Answer 2

在Vue中，我们可以使用递归组件来创建这种树形结构。首先，我们需要后端返回的数据格式是一个树形结构，例如：

[  {    "id": 1,    "name": "CEO",    "children": [      {        "id": 2,        "name": "CTO",        "children": [          {            "id": 3,            "name": "Engineer"          }        ]      },      {        "id": 4,        "name": "CFO",        "children": [          {            "id": 5,            "name": "Accountant"          }        ]      }    ]  }]

然后，我们可以创建一个递归组件来渲染这个树形结构。组件模板中，我们首先检查当前节点是否有子节点，如果有，我们为它们创建一个ul元素，并再次调用我们自己（即组件）来渲染每个子节点。下面是一个简单的示例：

<template>  <div>    <h3>{{ node.name }}</h3>    <ul v-if="node.children">      <li v-for="child in node.children" :key="child.id">        <org-node :node="child"></org-node>      </li>    </ul>  </div></template><script>export default {  name: 'OrgNode',  props: {    node: { required: true }  }}</script>

在这个组件中，我们使用了v-for来遍历每个子节点，并为每个子节点创建一个新的OrgNode组件。注意，我们在v-for中使用:key来为每个节点提供一个唯一的标识符，这是Vue的最佳实践。另外，我们在v-if中检查当前节点是否有子节点。如果没有，我们就不会渲染ul元素。