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

AI BotBETA

在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元素。

2 个回答

得票最新