tree-list 是一个实用的 npm 包，可以展示树形结构的数据列表，方便用户查看和操作。本文将介绍 tree-list 的使用方法，包括安装、调用和 API 等重要内容。
安装
使用 tree-list 前需要在你的项目中安装它，可以使用 npm 命令进行安装：
npm i tree-list
该命令将自动安装 tree-list 和它的所有依赖包。
调用
在安装完成后，你需要在你的项目中导入并使用 tree-list。
ES6 环境
如果你使用的是 ES6 环境，则需要导入以下模块：
import { TreeList } from 'tree-list';CommonJS 环境
如果你使用的是 CommonJS 环境，则需要导入以下模块：
const TreeList = require('tree-list').TreeList;AMD 环境
如果你使用的是 AMD 环境，则需要导入以下模块：
require(['tree-list'], function(TreeList) {
// your code here
});注：你需要在 webpack、Browserify 或 RequireJS 等工具中配置相应的模块导入方式。
API
现在我们已经成功导入了 tree-list，下面是一些常用的 API 方法：
1. TreeList(config)
TreeList 构造函数需要传入下面的 config 参数：
const config = {
rootId: '123', // 根节点 id
nodes: {}, // 节点列表
mode: 'read', // 操作模式：read 或 edit
onChange: fn // 值变化时的回调函数
};
const tree = new TreeList(config);rootId：指定根节点的 ID，必选参数；
nodes：指定节点列表，节点列表应为一个对象，必选参数；
mode：操作模式有两种，分别为 read （只读）和 edit （编辑），默认为 read；
onChange：监听值变化事件，回调函数接收一个参数：当前节点的 ID。
2. tree.render()
生成并返回树形列表的 HTML代码，并挂载到 DOM 节点中，可以参考下面的示例代码：
-- -------------------- ---- -------
------
---- --------------------------
------- --------------
------ - -------- - ---- ------------
----- ------ - -
------- ------
------ -
------ - --- ------ ----- ------ --------- ------- ------ ------ --
------ - --- ------ ----- ------- --------- -- --
------ - --- ------ ----- ------- --------- -- --
------ - --- ------ ----- ------- --------- ------- --
------ - --- ------ ----- -------- --------- -- -
--
----- -------
--------- -------- -- -------------------- -- -------------
--
----- ---- - --- -----------------
----- --------- - ------------------------------------------
------------------- - --------------
---------
-------3. tree.select(nodeId)
选择（或取消选择）某个节点，需要传入该节点的 ID。
const tree = new TreeList(config);
tree.select('123'); // 选中 ID 为 '123' 的节点4. tree.addSibling(nodeId)
添加兄弟节点，需要传入该节点的 ID。
const tree = new TreeList(config);
tree.addSibling('111'); // 在 ID 为 '111' 的节点后新建兄弟节点5. tree.addChild(nodeId)
添加子节点，需要传入该节点的 ID。
const tree = new TreeList(config);
tree.addChild('333'); // 在 ID 为 '333' 的节点后新建子节点6. tree.edit(nodeId)
进入编辑模式，需要传入该节点的 ID。
const tree = new TreeList(config);
tree.edit('123'); // 在 ID 为 '123' 的节点上进入编辑模式7. tree.delete(nodeId)
删除某个节点，需要传入该节点的 ID。
const tree = new TreeList(config);
tree.delete('111'); // 删除 ID 为 '111' 的节点示例
下面是一个简单的示例代码，可以对 tree-list 进行增删改查等操作：
-- -------------------- ---- -------
------
---- --------------------------
------- --------------
------ - -------- - ---- ------------
----- ------ - -
------- ------
------ -
------ - --- ------ ----- ------ --------- ------- ------ ------ --
------ - --- ------ ----- ------- --------- -- --
------ - --- ------ ----- ------- --------- -- --
------ - --- ------ ----- ------- --------- ------- --
------ - --- ------ ----- -------- --------- -- -
--
----- -------
--------- -------- -- -------------------- -- -------------
--
----- ---- - --- -----------------
----- --------- - ------------------------------------------
------------------- - --------------
-------------------------------------------------------------------- -- -- -
----- ----- - ---------------------------------------------
-----------------------------
------------------- - --------------
---
------------------------------------------------------------------ -- -- -
----- ----- - -------------------------------------------
---------------------------
------------------- - --------------
---
------------------------------------------------------------- -- -- -
----- ----- - --------------------------------------
-----------------------
---
--------------------------------------------------------------- -- -- -
----- ----- - ----------------------------------------
-------------------------
------------------- - --------------
---
---------
-----
------ ---------------------- --------------- --- --
------- ------------------------------------
------
-----
------ -------------------- --------------- --- --
------- ---------------------------------
------
-----
------ ----------------- --------------- --- --
------- -----------------------------
------
-----
------ --------------- --------------- --- --
------- -----------------------------
------
-------通过运行这个示例，你可以更好地理解 tree-list 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a3781e8991b448d7d9f