在前端开发中，我们经常需要处理树型结构的数据，因此一个好用的树形数据展示组件可以帮助我们更加高效地开发。今天，我要介绍的是一个非常优秀的 npm 包——bistro.js.tree。它可以帮助你快速创建一个漂亮的树形结构，并支持多种常见的操作，比如展开/折叠、选中等等。
安装
安装非常简单，只需要在终端里执行以下命令即可：
npm i bistro.js.tree
使用
加载 bistro.js.tree 后，你需要先创建一个包含数据的 JSON 对象：
-- -------------------- ---- -------
----- ---- - -
------ -------
--------- -
-
------ --------
--
-
------ ---------
--------- -
-
------ -------------
--
-
------ -------------
-
-
-
-
--然后，你可以使用 bistro.js.tree 提供的 Tree 类来创建树：
import { Tree } from 'bistro.js.tree';
const container = document.createElement('div');
const tree = new Tree(container, data);
document.body.appendChild(container);其中，container 是树的容器，data 是包含数据的 JSON 对象。这样，一个简单的树形结构就创建好了。
配置
bistro.js.tree 支持一些常用的配置选项，默认配置如下：
-- -------------------- ---- -------
-
------ --------
--------- -----------
------ --------
-------------- ------
------------ -----
----------- ----
------------- ----
----------- -------- ------ -
------ ------
--
--------- -------- ------ ---
-------- -------- ------ ---
--------- -------- ------ ---
----------- -------- ------ --
-其中，label、children 和 value 是用来指定 JSON 对象中对应的字段名。expandOnClick 用来指定是否在点击节点时展开/折叠节点。allowSelect 用来指定是否支持选中节点。expandIcon 和 collapseIcon 分别指定展开和折叠状态下的图标。
如果你需要修改默认配置，可以在创建 Tree 对象时传入第二个参数：
const tree = new Tree(container, data, {
allowSelect: false,
onSelect: function(node) {
console.log(node.label);
}
});上面的示例中，我们禁用了选中功能，并在选中节点时输出节点的标签。
方法
除了配置选项外，bistro.js.tree 还提供了一些常用的方法：
tree.select(node)
选中指定的节点。
tree.unselect(node)
取消选中指定的节点。
tree.expand(node)
展开指定的节点。
tree.collapse(node)
折叠指定的节点。
示例
下面是一个完整的示例：
-- -------------------- ---- -------
------
---- --------------------------
--------
------ - ---- - ---- -----------------
----- ---- - -
------ -------
--------- -
-
------ --------
--
-
------ ---------
--------- -
-
------ -------------
--
-
------ -------------
-
-
-
-
--
----- --------- - ------------------------------------------
----- ---- - --- --------------- ----- -
-------------- -----
--------- -------------- -
------------------------
-
---
---------
-------这里我们使用了默认配置，并在选中节点时输出节点的标签，同时启用了点击节点时展开/折叠的功能。
总结
bistro.js.tree 是一个非常优秀的 npm 包，非常适合用来展示树形结构数据。它提供了丰富的配置选项和常用方法，方便开发者进行定制和二次开发。希望本文能够给你带来帮助，也欢迎大家在评论区留言讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005534e81e8991b448d0892