vue3-tree-org：一个基于vue3.x的简易版组织架构图

• 架构图支持拖拽和通过鼠标滚轮缩放
• 支持新增/删除节点
• 支持编辑节点名称
• 支持拖动节点改变树结构
• 支持自定义右键菜单
• 支持slot自定义节点渲染内容
• 支持slot自定义展开按钮渲染内容

效果

目录

效果

一、介绍

1、官方文档

2、官方示例

 二、准备工作

1、安装依赖包

2、示例版本 

三、使用步骤

1、在 main.js 中写入以下内容

2、使用

四、完整示例

欢迎关注VX公众号：前端小知识营地

---

一、介绍

1、官方文档

https://sangtian152.github.io/vue3-tree-org/

2、官方示例

​

 二、准备工作

1、安装依赖包

npm i vue3-tree-org -S
# or 
yarn add vue3-tree-org

2、示例版本 

"vue3-tree-org": "^4.2.2",

三、使用步骤

1、在 main.js 中写入以下内容

import { createApp } from 'vue'
import vue3TreeOrg from 'vue3-tree-org';
import "vue3-tree-org/lib/vue3-tree-org.css";

const app = createApp(App)

app.use(vue3TreeOrg)
app.mount('#app')

2、使用

<vue3-tree-org
  ref="treeRef"
  :data="data"
  :horizontal="horizontal"
  :collapsable="collapsable"
  :label-style="style"
  :node-draggable="true"
  :scalable="false"
  :only-one-node="onlyOneNode"
  :default-expand-level="1"
  :filter-node-method="filterNodeMethod"
  :clone-node-drag="cloneNodeDrag"
  @on-restore="restore"
  @on-contextmenu="onMenus"
  @on-node-click="onNodeClick"
/>

四、完整示例

<template>
  <div class="tree-wrap" style="height: 400px">
    <div class="search-box">
      <span>搜索：</span>
      <input type="text" v-model="keyword" placeholder="请输入搜索内容" @keydown.enter="filter" />
    </div>
    <vue3-tree-org
      ref="treeRef"
      :data="data"
      :horizontal="horizontal"
      :collapsable="collapsable"
      :label-style="style"
      :node-draggable="true"
      :scalable="false"
      :only-one-node="onlyOneNode"
      :default-expand-level="1"
      :filter-node-method="filterNodeMethod"
      :clone-node-drag="cloneNodeDrag"
      @on-restore="restore"
      @on-contextmenu="onMenus"
      @on-node-click="onNodeClick"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const treeRef = ref()
const data = ref({
  id: 1,
  label: 'xxx科技有限公司',
  children: [
    {
      id: 2,
      pid: 1,
      label: '产品研发部',
      style: { color: '#fff', background: '#108ffe' },
      children: [
        { id: 6, pid: 2, label: '禁止编辑节点', disabled: true },
        { id: 8, pid: 2, label: '禁止拖拽节点', noDragging: true },
        { id: 10, pid: 2, label: '测试' }
      ]
    },
    {
      id: 3,
      pid: 1,
      label: '客服部',
      children: [
        { id: 11, pid: 3, label: '客服一部' },
        { id: 12, pid: 3, label: '客服二部' }
      ]
    },
    { id: 4, pid: 1, label: '业务部' }
  ]
})
const keyword = ref('')
const horizontal = ref(false)
const collapsable = ref(true)
const onlyOneNode = ref(true)
const cloneNodeDrag = ref(true)
const expandAll = ref(true)
const style = ref({
  background: '#fff',
  color: '#5e6d82'
})

const onMenus = ({ node, command }) => {
  console.log(node, command)
}
const restore = () => {
  console.log('restore')
}
const filter = () => {
  treeRef.value.filter(keyword.value)
}
const filterNodeMethod = (value, data) => {
  console.log(value, data)
  if (!value) return true
  return data.label.indexOf(value) !== -1
}
const onNodeClick = (e, data) => {
  ElMessage.info(data.label)
}
const expandChange = () => {
  toggleExpand(data.value, expandAll.value)
}
</script>
<style lang="scss" scoped>
.tree-wrap {
  position: relative;
  padding-top: 52px;
}
.search-box {
  padding: 8px 15px;
  position: absolute;
  top: 0;
  left: 0;
  input {
    width: 200px;
    height: 32px;
    border: 1px solid #ddd;
    outline: none;
    border-radius: 5px;
    padding-left: 10px;
  }
}
.tree-org-node__text {
  text-align: left;
  font-size: 14px;
  .custom-content {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid currentColor;
  }
}
</style>

欢迎关注VX公众号：前端小知识营地