vue3 使用 vue-okr-tree

Vue-OKR-Tree 是一个基于 Vue3 和 Element Plus 的树形组织结构图组件。使用 Vue-OKR-Tree 可以轻松地实现树形结构的展示和操作，同时还支持拖拽和可编辑等功能。

要使用 Vue-OKR-Tree，需要先安装 Element Plus 和 Vue-OKR-Tree 两个依赖，可以通过以下命令进行安装：

npm install element-plus vue-okr-tree

安装完成后，在 Vue 的入口文件中引入 Element Plus 和 Vue-OKR-Tree：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import VueOkrTree from 'vue-okr-tree'

import App from './App.vue'

createApp(App)
  .use(ElementPlus)
  .use(VueOkrTree)
  .mount('#app')

在组件中使用 Vue-OKR-Tree 如下所示：

<template>
  <vue-okr-tree :data="data" :options="options"></vue-okr-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { label: '节点1', children: [
          { label: '节点1-1' },
          { label: '节点1-2' }
        ]},
        { label: '节点2', children: [
          { label: '节点2-1' },
          { label: '节点2-2' }
        ]}
      ],
      options: {
        // 可以在这里配置组件的各种选项
      }
    }
  }
}
</script>

除了以上基本用法外，Vue-OKR-Tree 还支持一些高级用法，比如自定义节点模板、异步加载数据等。具体的使用方法可以参考官方文档。