在前端开发中，树形结构的数据常常出现，如何直观地展示这些数据呢？一种常见的做法是将它们转化成树形图。但是，手写这样的图表非常耗时和繁琐。这时候，一个会生成树形结构图的 npm 包便可以派上用场了。本文将教你如何使用一个它——vue-tree-dump。
安装
安装 vue-tree-dump 的方法非常简单，直接运行下面的命令：
npm install vue-tree-dump -S
使用
引入
在 Vue.js 的 Component 中引入 vue-tree-dump 的样式文件和 .vue 文件即可。
-- -------------------- ---- -------
----------
---- -------------
------------ --------------
------
-----------
--------
------ -------------------------------
------ ----------- ---- ----------------
------ ------- -
----------- - ----------- --
------ -
------ -
----- -
-
------ --------
--------- -
- ------ --------- --
- ------ --------- --
--
--
- ------ ------- --
--
--
--
--
---------
-------
----- -
---------- ------
-
--------数据
vue-tree-dump 接收一个 data 属性，这个属性是一个数组，其中每个对象代表一个节点。节点对象至少需要包含一个 label 属性，它是节点的名称。如果这个节点有子节点，则可以在这个节点对象中添加一个名为 children 的属性，它的值是一个数组，符合节点对象数组的规范即可。
深度
vue-tree-dump 会自动展开至所有深度，你可以控制它的深度，只需像下面这样添加一个 depth 属性即可：
<VueTreeDump :data="data" :depth="2"/>
此时，vue-tree-dump 仅会展开两层节点，深度未超过这个值的子节点都不会展开。
Slot
vue-tree-dump 还支持插槽，你可以在节点中动态传入内容。用法和普通的 Vue.js 模板语法类似。只需在节点对象的属性中添加名为 slot 的属性的键值即可。
-- -------------------- ---- -------
------ -
------ -
----- -
-
------ --------
----- ------------ ---------------
--
- ------ ------- --
--
--
--因为 slot 属性接收的是字符串，所以你需要在字符串中使用 HTML 标签。
Props
除了上面介绍的 depth 属性，vue-tree-dump 还支持其它 prop，下面是所有可用的 prop：
| Prop | 默认值 | 描述 |
|---|---|---|
| data | [] | 节点数据 |
| depth | Number.MAX_SAFE_INTEGER | 节点最大深度 |
| rowheight | '48px' | 行高 |
| iconsize | '24px' | 图标大小 |
| icons | {} |
图标映射表 |
| lines | true | 是否显示边线 |
| selectlabel | false | 选中后是否显示名称 |
| labelempty | false | 名称为空或为null时是否显示默认空值 |
示例
下面是一个完整示例代码：
-- -------------------- ---- -------
----------
---- -------------
------------ ------------ ---------- --
------
-----------
--------
------ -------------------------------
------ ----------- ---- ----------------
------ ------- -
----- ------
----------- - ----------- --
------ -
------ -
----- -
-
------ --------
--------- -
- ------ --------- --
- ------ --------- --
--
--
-
------ --------
----- ---------- - ------ ---------------
--------- -
-
------ ----------
--------- -- ------ ----------- -- - ------ ----------- ---
--
-
------ ----------
--------- -- ------ ----------- -- - ------ ------------ ----- --- --------------- --------- ---
--
--
--
-
------ --------
----- --- ------------- - ------ -------------
--
--
--
--
--
---------
-------
----- -
---------- ------
-
--------结语
vue-tree-dump 虽然功能简单，但却非常实用，能有效地提升开发效率。本文介绍了如何安装和使用 vue-tree-dump，介绍了一些常用的属性和示例代码。希望读者们会在开发过程中，更好地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671981e8991b448e3701