- Install
# use npm
npm install vue2-org-tree
# use yarn
yarn add vue2-org-tree
此外，必须下载
npm i --save -D less less-loader
不下载less就会报错，因为vue-org-tree内部就是lang= "less" 规则（less-loader版本不能太高，不兼容）
- introduce
main.jsadd in
import Vue2OrgTree from 'vue2-org-tree'
import 'vue2-org-tree/dist/style.css'
Vue.use(Vue2OrgTree)
- use
initial version
<vue2-org-tree :data="data"/>
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人事"
}
]
},
Self-modified version (almost this meaning)
<vue2-org-tree
ref="orgTree"
:data="deviceListTree" //组织结构数据
:horizontal="true" //从左到右展示
:renderContent="renderContent" //自定义节点内容
@on-node-click="NodeClickCancle" //节点点击事件
/>
data: {
id: 0,
deviceId: 11,
deviceType: 1,
label: "XXX科技有限公司",
children: [
{
id: 2,
deviceId: 22,
deviceType: 1,
label: "产品研发部",
children: [
{
id: 5,
deviceId: 55,
deviceType: 1,
label: "研发-前端"
},
{
id: 6,
deviceId: 66,
deviceType: 4,
label: "研发-后端"
},
{
id: 9,
deviceId: 99,
deviceType: 4,
label: "UI设计"
},
{
id: 10,
deviceId: 1010,
deviceType: 4,
label: "产品经理"
}
]
},
{
id: 3,
deviceId: 33,
deviceType: 27,
label: "销售部",
children: [
{
id: 7,
deviceId: 77,
deviceType: 27,
label: "销售一部"
},
{
id: 8,
deviceId: 88,
deviceType: 27,
label: "销售二部"
}
]
},
{
id: 4,
deviceId: 44,
deviceType: 27,
label: "财务部"
},
{
id: 9,
deviceId: 99,
deviceType: 27,
label: "HR人事"
}
]
},
methods:{
// 自定义节点内容
renderContent(h, data) {
const clickDevice = (e) => {
this.clickDevice(data, e);
};
return (
<span
style="width:100%;height:100%; border-radius:2px;"
on-dblclick={
openDeviceDrawer}
class="station"
>
<span style="font-size:12px;">
{
/* {data.label} */} //标题
{
/* 提示信息盒子 */}
<span
class="information"
>
<p>设备型号： {
data.label}</p>
<p>设备SN： {
data.label}</p>
<p>状态： {
data.label}</p>
<p>发电量： {
data.label}</p>
<p>发电功率： {
data.label}</p>
<p>输入电压： {
data.label}</p>
<p>输入电流： {
data.label}</p>
</span>
</span>
{
/* 图标 */}
<span>
//根据不同的数据展示不同的样式
<myicon
class={
this.activeItem.deviceId == data.deviceId ? "myicon classname" : "myicon"
}
type="icon-nibianqi"
v-show={
data.deviceType == 1}
/>
<myicon
class={
this.activeItem.deviceId == data.deviceId ? "myicon classname" : "myicon"
}
type="icon-nibianqi"
v-show={
data.deviceType == 4}
/>
<myicon
class={
this.activeItem.deviceId == data.deviceId ? "myicon classname" : "myicon"
}
type="icon-SCS"
v-show={
data.deviceType == 27}
/>
</span>
</span>
);
},
}
<style>
.org-tree-node-label .org-tree-node-label-inner {
//修改原始的节点样式
padding: 0;
}
</style>
- useful information sharing
Code cloud-vue-org-tree
https://gitee.com/hukaicode/vue-org-tree
Nuggets-vue-org-tree detailed explanation
https://juejin.cn/post/6844904103298990093
Detailed Explanation of Blog Garden-vue-org-tree
https://www.cnblogs.com/trampeagle/p/13432335.html