vue3.0 树形数据插件-CSDN博客

本文链接：https://blog.csdn.net/weixin_45597687/article/details/142656570

安装

推荐使用npm安装，它能更好地和webpackopen in new window打包工具配合使用。而且可以更好的和 es6配合使用。并且支持按需引入

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

#引入

在 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')

<template>
    <vue3-tree-org style="background: none;color: #FFFFFF" :data="data" :node-draggable="false" :zoom="0.5"
                   :props="{ id: 'id', label: 'label', children: 'children' }" center :horizontal="horizontal"
                   :disabled="disaled" :collapsable="collapsable" :label-style="style" :only-one-node="onlyOneNode"
                   :toolBar="{ scale: false, restore: false, expand: false, zoom: false, fullscreen: false, center: false }"

    />
</template>
<script setup>
import {ref, watch,defineProps,} from 'vue'

const props = defineProps({current:undefined})

const data = ref( {
    id: 0,
    label: "北投大厦",
    children: [
      {
        id: 2,
        label: "研发部",
        children: [
          {
            id: 5,
            label: "前端"
          },
          {
            id: 6,
            label: "后端"
          },
        ]
      },
      {
        id: 2,
        label: "产品部",
        children: [
          {
            id: 5,
            label: "产品"
          },
        ]
      },
      {
        id: 3,
        label: "销售部",
        children: [
          {
            id: 7,
            label: "销售"
          },
          {
            id: 8,
            label: "销售"
          }
        ]
      },
    ]
  })
watch(()=>props.current, (newValue) => {
    //数据更新
    Object.assign(data.value,  props.current);
})
const horizontal = ref(false)
const collapsable = ref(false)
const onlyOneNode = ref(false)
const disaled = ref(false)
const style = ref({
    background: "none",
    color: "#fff",
})
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    deptName: undefined,
    status: undefined
})
</script>
<style lang="scss">

.zm-tree-org .tree-org-node__text {
  //border: 1px dashed #1C95D3;
  padding: 8px 20px;
  border-radius: 5px;
  background: rgba(7, 41, 64, .6);
  //box-shadow: inset 5px 0px 8px 0px #007FE0;  表示阴影的水平偏移、垂直偏移、模糊半径和颜色
  box-shadow: inset 0px 4px 10px 0 #0c4f7b
}

.tree-org-node:not(:first-child):before, .tree-org-node:not(:last-child):after {
  border-top: 0.0625rem solid #1C95D3 !important;
}

.tree-org-node:after {
  left: 50%;
  //border-left: 0.0625rem solid #1C95D3!important;
}

.tree-org-node__children:before {
  border-left: 0.0625rem solid #1C95D3 !important;
}
</style>