vue3+js的组织架构图(vue3-tree-org)
一个基于vue3.x的简易版组织架构图
·
一个基于vue3.x的简易版组织架构图
安装
npm install vue3-tree-org --save
import vue3TreeOrg from 'vue3-tree-org'
import 'vue3-tree-org/lib/vue3-tree-org.css'
app.use(vue3TreeOrg)```
执行代码
<template>
<div class="wrap">
<div class="treeBox">
<vue3-tree-org
:data="state.data"
:node-draggable="false"
:horizontal="state.horizontal"
:label-style="state.style"
:default-expand-level="3"
:tool-bar="state.toolBar"
@on-node-click="onNodeClick"
/>
</div>
<div class="right">右边</div>
</div>
<page-footer />
</template>
<script setup>
import { reactive, onMounted } from 'vue'
const state = reactive({
data: {
id: 1,
label: 'xxx科技有限公司',
children: [
{
id: 2,
pid: 1,
label: '产品研发部',
children: [
{ id: 6, pid: 2, label: '禁止编辑节点' },
{ id: 8, pid: 2, label: '禁止拖拽节点' },
{ 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: '业务部' }
]
},
horizontal: true,
expandAll: true,
toolBar: false,
style: {
background: '#fff',
color: '#5e6d82'
}
})
onMounted(() => {
toggleExpand(state.data, state.expandAll)
})
function onNodeClick(e, data) {
console.log('data.label', data.label)
}
function toggleExpand(data, val) {
if (Array.isArray(data)) {
data.forEach(item => {
item.expand = val
if (item.children) {
toggleExpand(item.children, val)
}
})
} else {
data.expand = val
if (data.children) {
toggleExpand(data.children, val)
}
}
}
</script>
<style lang="scss" scoped>
.wrap {
display: flex;
height: 90%;
background: #fff;
margin: 5px;
padding: 20px;
.treeBox {
width: 50%;
height: 100%;
border: 1px solid #c3d0e2;
::v-deep .tree-org-node {
padding-left: 0;
}
}
}
</style>
效果
vue3-git地址:https://gitee.com/sangtian152/vue3-tree-org/
vue3-文档:https://sangtian152.github.io/vue3-tree-org/demo/
vue2-文档地址:https://sangtian152.gitee.io/zm-tree-org/#/guide
添加的额外样式后
style: {
background: '#fff',
color: '#5e6d82',
width: ' 100px',
boxShadow: 'none',
border: '1px solid #c3d0e2',
borderRadius: '5px',
fontSize: '12px'
}
**这些css放在全局才生效 不要加scoped**
.zm-tree-org {
height: 96%;
}
.tree-org-node__content .tree-org-node__text {
padding: 3px;
font-weight: bold;
}
.horizontal .tree-org-node.is-leaf,
.horizontal .tree-org-node.collapsed {
padding-top: 0;
padding-bottom: 0;
}
更多推荐
已为社区贡献3条内容
所有评论(0)