vue-orgchart如何下载引入
时间: 2023-09-15 12:22:32 浏览: 49
你可以通过以下步骤来下载并引入 `vue-orgchart` 插件:
1. 在终端中使用 npm 命令下载 `vue-orgchart` 插件:
```bash
npm install vue-orgchart --save
```
2. 在 Vue 项目中的 `main.js` 文件中引入 `vue-orgchart` 插件:
```javascript
import Vue from 'vue'
import OrgChart from 'vue-orgchart'
Vue.component('org-chart', OrgChart)
```
3. 在组件中使用 `org-chart` 标签来展示组织结构图:
```html
<template>
<div>
<org-chart :data="chartData"></org-chart>
</div>
</template>
<script>
export default {
data() {
return {
chartData: {
name: 'CEO',
children: [
{
name: 'Manager1',
children: [
{ name: 'Employee1' },
{ name: 'Employee2' }
]
},
{
name: 'Manager2',
children: [
{ name: 'Employee3' },
{ name: 'Employee4' }
]
}
]
}
}
}
}
</script>
```
在上述代码中,我们首先在 `main.js` 文件中引入了 `vue-orgchart` 插件,并在 Vue 实例中注册了 `org-chart` 组件。然后在组件中,我们传入了组织结构图的数据 `chartData`,并使用 `org-chart` 标签来展示组织结构图。