vue3加ts使用vue3-tree-org实现组织机构树

页面效果:

1、当我们遇到各部门层级的时候，我们可以使用vue3-tree-org的来实现此功能

官方文档：sangtian152.github.io/vue3-tree-o…

2、使用以下指令进行安装：

npm i vue3-tree-org

yarn add vue3-tree-org

3、在main.ts中进行引入

// 在main.js中引入

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

app.use(vue3TreeOrg)

4、在对应的页面进行引入并使用

<template>
    <div style="display: flex; padding: 10px;">
        <div style="margin-right: 10px"><el-switch v-model="horizontal"></el-switch> 横向</div>
        <div style="margin-right: 10px"><el-switch v-model="collapsable"></el-switch> 可收起</div>
        <div style="margin-right: 10px"><el-switch v-model="disaled"></el-switch> 禁止编辑</div>
        <div style="margin-right: 10px"><el-switch v-model="onlyOneNode"></el-switch> 仅拖动当前节点</div>
        <div style="margin-right: 10px"><el-switch v-model="cloneNodeDrag"></el-switch> 拖动节点副本</div>
    </div>
    <div style="padding: 0 10px 10px">
        背景色：<el-color-picker v-model="style.background" size="small"></el-color-picker>&nbsp;
        文字颜色：<el-color-picker v-model="style.color" size="small"></el-color-picker>&nbsp;
    </div>
    <div style="height: 500px;width: 100%;">
        <vue3-tree-org :data="data || ''" :node-draggable="true"
            :props="{ id: 'id', label: 'label', children: 'children' }" center :horizontal="horizontal"
            :disabled="disaled" :collapsable="collapsable" :label-style="style" :only-one-node="onlyOneNode"
            :clone-node-drag="cloneNodeDrag" :before-drag-end="beforeDragEnd"
            :toolBar="{ scale: false, restore: false, expand: false, zoom: false, fullscreen: false, center: true }"
            @on-node-drag="nodeDragMove" @on-node-drag-end="nodeDragEnd" @on-contextmenu="onMenus" @on-expand="onExpand"
            @on-node-dblclick="onNodeDblclick" @on-node-click="onNodeClick" />
    </div>
</template>
<script>
import { ElSwitch, ElColorPicker, ElMessage } from 'element-plus'
import { ref, getCurrentInstance } from 'vue'
export default {
    name: "baseTree",
    components: {
        ElSwitch,
        ElColorPicker,
    },
    setup() {
        const cloneNodeDrag = ref(false)
        const { proxy } = getCurrentInstance()
        return {
            cloneNodeDrag,
            proxy
        }
    },
    data() {
        return {
            data: {
                id: 0,
                label: "XXX科技有限公司",
                children: [
                    {
                        id: 2,
                        label: "产品研发部",
                        children: [
                            {
                                id: 5,
                                label: "研发-前端"
                            },
                            {
                                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人事"
                    }
                ]
            },
            horizontal: false,
            collapsable: false,
            onlyOneNode: true,
            expandAll: true,
            disaled: true,
            style: {
                background: "#fff",
                color: "#5e6d82",
            },
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deptName: undefined,
                status: undefined
            }
        };
    },
    created() {
        this.toggleExpand(this.data, this.expandAll);
    },
    methods: {
        onMenus({ node, command }) {
            console.log(node, command);
        },
        onExpand(e, data) {
            console.log(e, data);
        },
        onExpandAll(b) {
            console.log(b)
        },
        nodeDragMove(data) {
            console.log(data);
        },
        beforeDragEnd(node, targetNode) {
            return new Promise((resolve, reject) => {
                if (!targetNode) reject()
                if (node.id === targetNode.id) {
                    reject()
                } else {
                    resolve()
                }
            })
        },
        nodeDragEnd(data, isSelf) {
            console.log(data, isSelf);
        },
        onNodeDblclick() {
            console.log('onNodeDblclick')
        },
        onNodeClick(e, data) {
            ElMessage.info(data.deptName);
        },
        expandChange() {
            this.toggleExpand(this.data, this.expandAll);
        },
        toggleExpand(data, val) {
            if (Array.isArray(data)) {
                data.forEach((item) => {
                    item.expand = val
                    if (item.children) {
                        this.toggleExpand(item.children, val);
                    }
                });
            } else {
                data.expand = val
                if (data.children) {
                    this.toggleExpand(data.children, val);
                }
            }
        }
    },
};
</script>