vue 使用orgchart 写一个组织结构图页面

好的，下面是一个简单的组织结构图页面的示例代码：

<template>
  <div id="app">
    <org-chart :data="chartData" :node-template="nodeTemplate"></org-chart>
  </div>
</template>

<script>
import OrgChart from 'vue-orgchart'

export default {
  name: 'App',
  components: {
    OrgChart
  },
  data() {
    return {
      chartData: {
        name: 'CEO',
        children: [
          {
            name: 'Manager1',
            children: [
              { name: 'Employee1' },
              { name: 'Employee2' }
            ]
          },
          {
            name: 'Manager2',
            children: [
              { name: 'Employee3' },
              { name: 'Employee4' }
            ]
          }
        ]
      },
      nodeTemplate: `
        <div class="node">
          <div class="title">{{node.name}}</div>
        </div>
      `
    }
  }
}
</script>

<style>
.node {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 120px;
  text-align: center;
}

.title {
  font-size: 14px;
  font-weight: bold;
}
</style>

这里使用了 `vue-orgchart` 插件来实现组织结构图的展示，同时传入了组织结构图的数据 `chartData` 和节点模板 `nodeTemplate`。在节点模板中，我们使用了 `node.name` 来展示节点的名称。您可以根据实际需求来自定义节点模板的样式和内容。