关于在vue中实现组织架构树的方案

代码可能有部分错误，因为最终版代码搞丢了，复制粘贴请稍微改下，但一般能用

1. 安装vue3-tree-org

npm insatll vue2-org-tree

2. 在main.js引入文件

import vue3TreeOrg from 'vue3-tree-org';
import "vue3-tree-org/lib/vue3-tree-org.css";


Vue.use(vue3TreeOrg)

4.组件代码中复制该段，具体内容需要重写部分可以参照vue3-tree-org官方文档

<template>
 <vue3-tree-org
          :data="data"
          :collapsable="collapsable"
          :label-style="style"
          :only-one-node="onlyOneNode"
          :clone-node-drag="cloneNodeDrag"
          :before-drag-end="beforeDragEnd"
          @on-node-drag="nodeDragMove"
          @on-node-drag-end="nodeDragEnd"
          @on-contextmenu="onMenus"
          @on-expand="onExpand"
          @on-node-dblclick="onNodeDblclick"
          @on-node-click="onNodeClick"
        />
</template>

<script> 
export default{
data(){
    return{
      labelClassName: "bg-color-orange",
      basicInfo: { id: null, label: null },
      basicSwitch: false,
      data: {
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
            id: 2,
            label: "产品研发部",
            children: [
              {
                id: 5,
                label: "研发-前端",
                children: [
                  {
                    id: 55,
                    label: "前端1"
                  },
                  {
                    id: 56,
                    label: "前端2"
                  },
                  {
                    id: 57,
                    label: "前端3"
                  },
                  {
                    id: 58,
                    label: "前端4"
                  }
                ]
              },
              {
                id: 6,
                label: "研发-后端"
              },
              {
                id: 9,
                label: "UI设计"
              },
              {
                id: 10,
                label: "产品经理"
              }
            ]
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部"
              },
              {
                id: 8,
                label: "销售二部"
              }
            ]
          },
          {
            id: 4,
            label: "财务部"
          },
          {
            id: 9,
            label: "HR人事"
          }
        ]
      },
    }
},
methods:{
    //渲染节点
     renderContent (h, data) {
      return (
        <div>
          <el-popover
            placement="bottom"
            trigger="click">
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="primary" plain round onClick={(v) => this.onClick(v, data)}>新增下级</el-button>
              <el-button size="mini" type="primary" plain round onClick={(v) => this.update(v, data)}>编辑</el-button>
              <el-button plain round size="mini" onClick={(v) => this.onerror(v, data)}>删除</el-button>
            </div>
            <div slot="reference">
              <div style="width:100%;height:100%;display:block;padding:12px 0 12px 10px;border-radius:3px;text-align:left;display:flex">
                <div style="height:9vh;" >
                
                </div>
                <div style="margin-left:10px;font-size:16px;">
                  <div style="font-weight: bold;">META PRINCIPAL</div>
                  <div style="border-bottom: 1px solid #ffffff;padding: 13px 0 4px 0;">{data.label}</div>
                  <div style="padding-top: 4px;">{data.label}</div>
                </div>
              </div>
            </div>
          </el-popover>
        </div>
      )
    },
    //鼠标移出
    onMouseout(e, data) {
      this.basicSwitch = false;
    },
    //鼠标移入
    onMouseover(e, data) {
      this.basicInfo = data;
      this.basicSwitch = true;
      // var floating = document.getElementsByClassName("floating")[0];
      // floating.style.left = e.clientX + "px";
      // floating.style.top = e.clientY + "px";
    },
    //点击节点
    NodeClick(e, data) {
      console.log(e, data);
    },
    rightClick (MouseEvent) {
      debugger
        console.log("鼠标右击事件",MouseEvent)
    },
    //默认展开
    toggleExpand(data, val) {
      if (Array.isArray(data)) {
        data.forEach(item => {
          this.$set(item, "expand", val);
          if (item.children) {
            this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          this.toggleExpand(data.children, val);
        }
      }
    },
    collapse(list) {
      list.forEach(child => {
        if (child.expand) {
          child.expand = false;
        }
        child.children && this.collapse(child.children);
      });
    },
    //展开
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
}

}
</script>

<style>
.bg-gray {
    color: gray;
    box-shadow: none !important;
  }

.org-tree-container{
    position: relative;     /*定位*/
    top: 0;
    left: 0;
  }

</style>