简介
tree-chooser 是一款可以快速生成树形结构的选择器，基于 npm 包开发的 JavaScript 插件，功能强大，易于使用，适用于前端中的各种场景，如树形结构选择、分类选择、区域选择等。
在使用 tree-chooser 之前需要先安装它，可以通过以下 npm 命令进行安装：
npm install tree-chooser
使用方法
在安装完成后，在需要使用 tree-chooser 的项目中引入该模块，可以使用 import 或者 require 方式引入：
import 'tree-chooser';
或者：
require('tree-chooser');基本用法
在页面中创建一个包含 tree-chooser 的元素，例如 div，可以在该元素上添加自定义属性，比如 data-tree-chooser，用于配置 tree-chooser 的相关选项：
<div data-tree-chooser></div>
然后初始化 tree-chooser：
$('[data-tree-chooser]').treeChooser();在执行上述代码后，将会在该 div 元素中生成一个树形结构的列表，可以通过选中列表中的元素进行选择，实现树形结构的选择功能。
配置选项
通过设置自定义属性 data-tree-chooser，可以配置 tree-chooser 的相关选项，如下：
<div data-tree-chooser='' data-tree-data="data" data-tree-multi-select="true"></div>
其中，data-tree-data 用于设置树形列表的数据源，必填选项，可以是一个 json 对象或者接口地址等；data-tree-multi-select 表示允许多选或单选，可以为 true/false，默认为 false。
回调函数
可以通过回调函数监听 tree-chooser 的不同事件：
$('[data-tree-chooser]').treeChooser({
onInit: function() {
console.log('tree-chooser 初始化完成！');
},
onChange: function(data) {
console.log('已选择的数据', data);
}
});其中 onInit 函数在 tree-chooser 初始化完成后执行；onChange 函数在每次选择发生变化后执行，同时传入当前选择的数据。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ------------
------- ---------------------- -----------------------------------------------------------
------- ---------------------- ---------------------------------------------------------
-------
------
---- -------------------- ----------------------- -- ------- ---------------- ------- -- ------- ------- ------ -- ------- ---------- ------------------------------------
--------
------------ -
--------------------------------------
------- ---------- -
------------------------- ---------
--
--------- -------------- -
--------------------- ------
-
---
--
---------
-------
-------总结
tree-chooser 是一款非常实用的前端插件，它可以快速生成树形结构的选择器，广泛应用于各种前端场景中。我们在使用该插件时，需要注意其配置选项以及回调函数的使用，使我们的代码更加灵活，实现我们所需的功能。在实际项目中，我们可以根据需求进行二次开发，加强功能、提高易用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728f81e8991b448e8c51