<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组织架构图Demo</title>
<link rel="stylesheet" href="css/style.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<style>
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
}
#app {
height: 100%;
overflow-y: hidden;
}
#chart-container {
top: 0px;
left: 0px;
width: auto;
height: 100%;
}
/* 组织架构图中节点的标题部分 */
.orgchart .node .title {
height: 35px;
font-size: 14px;
padding: 15px;
box-sizing: border-box; /* 使用 border-box 盒模型，确保内边距和边框不会增加元素的总宽度和高度 */
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
line-height: 0; /* 将标题容器的行高设置为 0，以消除可能存在的额外空白 */
background: lightseagreen;
}
/* 组织架构图中节点标题中的符号 */
.orgchart .node .title .symbol {
float: none; /* 取消符号的浮动效果，使其不脱离文档流，保持与其他元素的正常布局。 */
margin-top: 0;
margin-right: 10px;
}
/* 组织架构图中节点宽度自动 */
.orgchart .node {
width: auto;
}
/* 定位导出按钮的位置 */
.oc-export-btn {
position: fixed;
top: 10px;
right: 10px;
height: 35px;
z-index: 100;
}
/* 隐藏架构图中节点展开和收起图标 */
.fa-chevron-up, .fa-chevron-down, .fa-chevron-left, .fa-chevron-right {
display: none;
}
</style>
<body>
<div id="app">
<!-- 使用 vo-basic 组件来展示组织架构图 -->
<!--
<vo-basic> 组件用于展示组织架构图，以下是每个属性的含义：
- data: 指定组织架构图的数据对象，包含节点名称和子节点的层次结构。
- pan: 控制是否启用平移（拖动）功能。设置为 true 启用，设置为 false 禁用。
- zoom: 控制是否启用缩放功能。设置为 true 启用，设置为 false 禁用。
- export-button: 控制是否显示导出按钮。设置为 true 显示，设置为 false 不显示。
- export-button-name: 导出按钮的显示名称。
- draggable: 控制节点是否可拖动。设置为 true 可拖动，设置为 false 不可拖动。
- toggle-siblings-resp: 控制是否允许展开/折叠同级节点。设置为 true 允许，设置为 false 禁止。
- parent-node-symbol: 指定父节点的图标样式类名。
请根据需要对这些属性进行设置，以满足你的组织架构图展示的要求。
-->
<vo-basic ref="orgChart" :key="componentKey" :data="chartData" :pan="true" :zoom="true" :export-button="true"
export-button-name="导 出" :export-filename="'导出结果'"
:draggable="false" :toggle-siblings-resp="false" parent-node-symbol="fa-users"></vo-basic>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-orgchart.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
chartData: {},
componentKey: 0, // 每次数据更新时，由于key的改变，Vue都会强制重新渲染vo-basic组件，从而使新的数据得到显示
},
mounted() {
this.initData();
},
methods: {
initData() {
fetch('moke/data.json')
.then(response => response.json())
.then(data => {
this.chartData = data;
this.componentKey += 1;
})
.catch(error => {
console.error('Error:', error);
});
}
}
})
</script>
</html>
使用vue-orgchart库来创建组织架构图
需积分: 5 122 浏览量
2023-06-05
23:22:23
上传
评论
收藏 380KB ZIP 举报
vue-orgchart-demo.zip （12个子文件） 
vue-orgchart-demo js 
html2canvas.js 431KB vue-orgchart.js 134KB vue-orgchart.min.js 53KB vue.js 424KB html2canvas.min.js 194KB vue.min.js 105KB css style.css 11KB font-awesome.min.css 28KB style.min.css 9KB moke data.json 2KB
demo.html 4KB fonts fontawesome-webfont.woff2 65KB资源评论
