npm 包 tree-selector 使用教程
介绍
Tree-selector 是一个基于 Vue.js 的可用于渲染树形结构的选择器组件。它的特点包括：
- 支持多选与单选模式
- 支持搜索节点
- 支持对节点的
checkbox和radio样式的自定义渲染 - 提供全选、反选等批量操作
如果你正在开发一个需要使用树形结构选择的应用，那么 tree-selector 会是一个很好的选择。
安装
使用 npm 进行安装：
npm i tree-selector
使用
下面是一个简单的例子，演示了如何使用 tree-selector 渲染一棵树：
-- -------------------- ---- -------
----------
------------- ------------ ---------------------- --
-----------
--------
------ ------------ ---- ---------------
------ ------- -
----------- - ------------ --
------ -
------ -
----- -
-
--- --
------ --- ---
--------- -
-
--- --
------ --- -----
--------- -
- --- -- ------ --- ------ --
- --- -- ------ --- ------ -
-
--
- --- -- ------ --- ---- -
-
--
- --- -- ------ --- -- -
-
-
--
-------- -
---------------------- -
---------------------
-
-
-
---------以上代码将会渲染如下结果：
Props
tree-selector 组件支持以下 Props：
data
- 类型：Array
- 默认值：
[]
一个树形结构数据的数组，每个元素需包含以下属性：
id：该节点的唯一标识符label：该节点的文字描述children：该节点的子节点，如果该节点没有子节点，则该属性可以省略。
-- -------------------- ---- -------
-
-
--- --
------ --- ---
--------- -
-
--- --
------ --- -----
--------- -
- --- -- ------ --- ------ --
- --- -- ------ --- ------ -
-
--
- --- -- ------ --- ---- -
-
--
- --- -- ------ --- -- -
-multiple
- 类型：Boolean
- 默认值：
false
是否是多选模式。
value
- 类型：Array
- 默认值：
[]
组件当前选中的节点列表，每个元素为 data 数组元素的 id 值。
props
- 类型：Object
- 默认值：
{
id: 'id',
label: 'label',
children: 'children'
}自定义节点的属性名。
renderCheckbox
- 类型：Function
- 默认值：无
渲染多选模式下节点的选中框，该函数接收以下参数：
node：当前节点的数据对象checked：该节点是否被选中indeterminate：该节点下部分子节点是否被选中
function(node, checked, indeterminate) {
return <span style={{ color: checked ? 'red' : 'black' }}>{checked ? '+' : '-'} {node.label}</span>
}renderRadio
- 类型：Function
- 默认值：无
渲染单选模式下的单选框，该函数接收以下参数：
node：当前节点的数据对象checked：该节点是否被选中
function(node, checked) {
return <span style={{ color: checked ? 'red' : 'black' }}>{checked ? '+' : '-'} {node.label}</span>
}searchable
- 类型：Boolean
- 默认值：
false
是否支持搜索节点。
emptyText
- 类型：String
- 默认值：
'暂无数据'
当树为空时，显示的文本。
showCheckbox
- 类型：Boolean
- 默认值：
true
是否显示多选模式下的选中框。
showRadio
- 类型：Boolean
- 默认值：
true
是否显示单选模式下的单选框。
checkStrictly
- 类型：Boolean
- 默认值：
false
是否按照严格的选中状态返回结果。如果为 true，则只返回当前级别选中的节点，否则会返回当前级别及以下所有选中的节点。
事件
tree-selector 组件支持以下事件：
select(selected)
当用户选择操作时，会触发 select 事件，该事件会传递一个数组参数，表示当前所有选中的节点的 id 值：
[ // 选中的节点 1 1, // 选中的节点 1-1 2, // 选中的节点 1-1-1 3 ]
如果没有选中任何节点时，则该参数为 [] 数组。
示例代码
请参考 tree-selector 的 GitHub 仓库 中的 examples 目录，其中 basic.vue 文件演示了基本使用方法，custom-render.vue 文件演示了如何自定义节点渲染。
小结
本文介绍了使用 tree-selector 渲染树形结构的方法和属性，以及如何自定义渲染节点样式和处理选择事件。tree-selector 提供了丰富的选项，使得开发者能快速开发出树形结构选择器，并且可以灵活调整选项，满足各种场景需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f228ae7403f2923b035c6c9