简介
@beisen/upaas-lookup-v2 是一款帮助前端开发者实现树形下拉框的工具包。它包含了树形数据的渲染和搜索功能，大大减少了前端开发者在树形下拉框实现上的代码量。
安装
在安装 @beisen/upaas-lookup-v2 前，你需要先安装 Node.js 和 npm。接着，在你的项目目录下执行以下命令安装 @beisen/upaas-lookup-v2：
npm install --save @beisen/upaas-lookup-v2
快速上手
基础使用方法
在你的 JavaScript 代码中引入 @beisen/upaas-lookup-v2：
-- -------------------- ---- -------
------ ------ ---- --------------------------
----- ---- - --
--- --
----- -----
--------- --
--- ----
----- -----
--------- --
--- ------
----- ----
-- -
--- ------
----- ----
--
--
---
----- ------ - -
-----
----------- ------ -- -
------------------------ ------
-
--
----- ------ - --- ---------------
----------------通过 config 配置项，传入数据和回调函数 onSelected，可以渲染出一棵树，并在选中节点时触发回调函数。
进阶使用方法
@beisen/upaas-lookup-v2 还支持搜索节点的功能，通过在配置项中传入 searchConfig 参数，可以配置搜索功能的行为。例如：
-- -------------------- ---- -------
----- ------ - -
-----
------------- -
----------- -----
--------- ----
----------- - ------ --
--------- ------- -- -
-------------------- -- -------
-
--
----------- ------ -- -
------------------------ ------
-
--在 searchConfig 配置项中，我们可以配置 searchable 参数来控制搜索框是否出现。通过 debounce 参数，我们可以控制在输入时的搜索间隔时间。searchPath 参数可以指定在哪些字段中搜索关键字。onSearch 回调函数将会传入用户输入的查询字符串作为参数。
API
Lookup(config)
构造函数。用于创建一个实例。config 参数是 Lookup 的配置项，支持以下属性：
- data：渲染的数据。必须是一个数组类型，包含了节点的 id 和 name 。id 为每个节点的唯一标识；name 为节点的名称。
- onSelected：在选择节点时发生的回调函数。该函数接受一个被选中节点的对象。
- searchConfig：搜索结构的配置项，支持以下属性：
- searchable：是否开启搜索框。默认为 false。
- debounce：查询间隔时间（毫秒）。默认为 1000。
- searchPath：在哪些字段中进行搜索。如果只在树的节点名称搜索，这里传入 ['name']。默认为 ['name']。
- onSearch：在搜索框中输入搜索关键字时触发的回调函数。
Lookup.render()
渲染树形下拉框。调用该方法可以将创建的 Lookup 实例插入到 DOM 中。
Lookup.setData(data)
重新设置树形下拉框的数据。参数 data 必须为一个数组类型，包含了节点的 id 和 name。id 为每个节点的唯一标识；name 为节点的名称。
Lookup.setSearchable(searchable)
设置搜索框是否显示。searchable 为布尔类型。true：显示搜索框；false：隐藏搜索框。
Lookup.setSearchPath(searchPath)
设置搜索的字段。searchPath 必须为一个数组类型，在数组中指定树的节点的哪些字段进行搜索。例如，如果只在 name 属性上搜索关键字，可以指定为 ['name']。
Lookup.setOnSelected(onSelected)
设置选择节点时的回调函数。
Lookup.setOnSearch(onSearch)
设置搜索框中输入关键字时的回调函数。
示例代码
以下是一个完整的示例代码，用于演示 @beisen/upaas-lookup-v2 的常用功能：
-- -------------------- ---- -------
------ ------ ---- --------------------------
----- -------- - --
--- --
----- -----
--------- --
--- ----
----- -----
--------- --
--- ------
----- ----
-- -
--- ------
----- ----
--
--
-- -
--- --
----- -----
--------- --
--- ----
----- -----
--------- --
--- ------
----- ------
-- -
--- ------
----- -----
--
--
---
----- ------ - -
----- ---------
------------- -
----------- -----
--------- ----
----------- ---------
--------- ------- -- -
----------------------- -- -------
-
--
----------- ------ -- -
---------------------- -- ------
-
--
----- ------ - --- ---------------
----------------
------------- -- -
-- ------
----- --------- - --
--- --
----- -----
--------- --
--- ----
----- -----
--------- --
--- ------
----- ----
-- -
--- ------
----- ----
--
--
-- -
--- --
----- -----
--------- --
--- ----
----- -----
--------- --
--- ------
----- -----
-- -
--- ------
----- -----
--
--
---
--------------------------
-- ------总结
通过使用 @beisen/upaas-lookup-v2，前端开发者可以大大减少实现树形下拉框时的代码量，并且拥有了树形数据和搜索功能的支持。上文已经介绍了 @beisen/upaas-lookup-v2 的基础使用和进阶使用方法，同时也讲解了该包的 API 和示例代码。希望读者可以在实际项目中使用该包，并发挥该包的优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bda81e8991b448e584a