代码拉取完成,页面将自动刷新
vue组织树插件
import OrgTree from './components/org-tree/index';
Vue.use(OrgTree);
<OrgTree :data="data" :label-class-name="labelClassName" @on-node-click="onNodeClick" ref="orgTree"></OrgTree>
1、data:数据
{
id: 0,
label: "XXX科技有限公司",
expand: false,
children: [
id: 0,
label: "XXX科技有限公司",
expand: false,
]
}
2、horizontal:显示方向
Boolean,false横向/true纵向显示,默认是true
3、labelClassName:自定义节点的class名
4、expand:初始化是否展开所有节点,Boolean类型,默认false不展开
# 节点单击事件
on-node-click,返回当前鼠标对象和节点数据
# 获取图的所有数据
getData()
# 1、修改节点
鼠标单击选中节点后,按回车键,或者直接双击节点
# 2、添加子节点
鼠标单击选中节点后,按方向键 ↓
# 3、删除节点
鼠标单击选中节点后,按del删除键
<template>
<div id="app">
<OrgTree :data="data" :label-class-name="labelClassName" @on-node-click="onNodeClick" ref="orgTree"></OrgTree>
<div>
<button v-on:click="getData()">获取数据</button>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
data: {
id: 0,
label: "XXX科技有限公司",
expand: false,
children: [
{
id: 2,
label: "产品研发部",
children: [
{
id: 5,
label: "研发-前端"
},
{
id: 6,
label: "研发-后端"
},
{
id: 91,
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,
labelClassName: "bg-white"
}
},
methods: {
/**
* 单机节点
*/
onNodeClick(e, data) {
},
// 获取数据
getData(){
console.log(this.$refs.orgTree.getData());
}
}
}
</script>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。