需求场景
我们有一个生产计划追溯的功能模块，主要将产品的生产过程全部追溯出来，包含了操作人员、设备、批次、配方等等。
调研
起初我在echarts里看到了树形图，试着实现了一下，发现定制化有限，根本满足不了需求。然后我又试了AntV G6，翻了下文档，感觉有一定上手难度，而且消化文档会比较花时间，最关键的是，没必要引入这么重的库，有点大材小用了。最后经过一番搜寻我找到了vue3-tree-org，这个库使用起来非常简单，几行代码就完成了。
效果展示
代码示例
安装
1
2
3
| npm i vue3-tree-org -S
# or
yarn add vue3-tree-org
|
引入
1
2
3
4
5
6
7
8
| import { createApp } from 'vue'
import vue3TreeOrg from 'vue3-tree-org';
import "vue3-tree-org/lib/vue3-tree-org.css";
const app = createApp(App)
app.use(vue3TreeOrg)
app.mount('#app')
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <vue3-tree-org
class="tree-org-container"
:data="treeData"
:center="true"
:horizontal="true"
:collapsable="false"
:node-draggable="true"
:scalable="true"
:only-one-node="false"
:default-expand-level="1"
:toolBar="false"
>
<template v-slot="{node}">
<div class="tree-org-node-container flex" v-if="node?.label?.key === 'root'">
<div class="img-wrap1 flex-c-c">
<img src="@/assets/img/org1.svg" alt="">
</div>
<div class="pd12 w100">
<div><p class="blue">批次编码：<span class="blue">{{ node?.label?.code }}</span></p></div>
<div><p>产品名称：<a-tooltip :title="node?.label?.name"><span>{{ node?.label?.name }}</span></a-tooltip></p></div>
<div><p>配方版本：<span>{{ node?.label?.version }}</span></p></div>
<div><p>产量：<span>{{ node?.label?.quantity }}</span></p></div>
</div>
</div>
<div class="tree-org-node-container flex" v-else-if="node?.label?.key === 'device'">
<div class="img-wrap2 flex-c-c">
<img src="@/assets/img/org2.svg" alt="">
</div>
<div class="pd12 w100">
<div><p class="green">设备编码：<span class="green">{{ node?.label?.deviceCode }}</span></p></div>
<div><p>工序编码：<span>{{ node?.label?.processCode }}</span></p></div>
<div><p>启动时间：<span>{{ node?.label?.startTime }}</span></p></div>
</div>
</div>
<div class="tree-org-node-container flex" v-else>
<div class="img-wrap3 flex-c-c">
<img src="@/assets/img/org3.svg" alt="">
</div>
<div class="pd12 w100">
<div><p class="brown">物料编码：<span class="brown">{{ node?.label?.code }}</span></p></div>
<div><p>物料名称：<span>{{ node?.label?.name }}</span></p></div>
<div><p>物料批次：<span>{{ node?.label?.batch }}</span></p></div>
<div><p>耗量：<span>{{ node?.label?.quantity }}</span></p></div>
</div>
</div>
</template>
</vue3-tree-org>
|
非常简单，它的自定义插槽很方便，我们只需理解label和children这2个概念就行，通过node获取对象并不方便，官网上写着label是string类型，但我发现了他也支持Object，就把他当做props了存对象了，因为我这每一层样式是不同的，所以需要过滤插槽，如果每层样式都一样，直接传入children就行，他会自己处理层级关系。
哦对了，我最近开发了一个叫牛马工作器的chrome拓展插件，很好玩哦，感兴趣的话，给我的公众号回复牛马即可免费获取。
我的微信公众号： 梨的前端小屋
