v-tree-select 是一个基于 Vue.js 的 npm 包，能够提供可折叠的树形结构选择器组件。在前端开发中，树形结构的数据展示和选择往往是不可避免的需求场景，因此掌握 v-tree-select 的使用，能够提高我们工作的效率。
安装
在使用 v-tree-select 之前，需要先安装它。可以使用 npm 命令行工具进行安装：
npm install v-tree-select
使用
使用 v-tree-select 需要先在 Vue 中导入该组件：
import VTreeSelect from 'v-tree-select'
在组件中进行注册：
export default {
components: { VTreeSelect },
...
}接着，可以使用 <v-tree-select> 标签在模板中进行使用。
<v-tree-select :data="treeData"></v-tree-select>
其中，treeData 为组件所需的数据源。这个数据源应该是一个数组，每个元素代表树的一个节点，该元素应至少包含两个 key-value，一个是 label，表示待展示的文本，另一个是 children，表示子节点数组。
-- -------------------- ---- -------
------ -
------ -
--------- -
-
------ ------
--------- -
-
------ --------
--------- --
-
-
--
-
------ ------
--------- --
-
-
-
-至此，便完成了 v-tree-select 组件的基本使用配置。
深度学习
除了基本使用，我们可以进一步学习 v-tree-select 的属性及事件，以掌握更多使用技巧。
属性
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| data | Array | [] | 数据源 |
| multiple | Boolean | false | 是否多选 |
| max-selection | Number | -1 | 最大可选数（仅当 multiple 为 true 时生效） |
| expand-all | Boolean | false | 是否展开所有节点 |
| expand-all-level | Number | -1 | 展开所有节点的最大层数 |
其中，max-selection 和 expand-all-level 为限制条件。当 max-selection 不为 -1 时，用户选择超出最大限制数后将不能再选择；当expand-all-level 不为 -1 时，展开树的层数不得超过该值。
事件
| 事件名 | 参数 | 描述 |
|---|---|---|
| selected-change | Array | 选中的节点数组 |
| expanded-change | Array | 展开的节点数组 |
示例代码
下面通过示例说明如何使用 max-selection 限制选择数量：
-- -------------------- ---- -------
----------
-------------- ---------------- ------------------ ---------------- ----------------------------------------------------
-----------
--------
------ ----------- ---- ---------------
------ ------- -
----------- -
-----------
--
------ -
------ -
--------- -
-
------ ------
--------- -
-
------ --------
--------- --
--
-
------ --------
--------- --
--
-
------ --------
--------- --
-
-
--
-
------ ------
--------- --
--
-
------ ------
--------- -
-
------ --------
--------- -
-
------ ----------
--------- --
-
-
--
-
------ --------
--------- --
-
-
-
--
-------------- --
-
--
-------- -
------------------------------- -
------------------ - -------------
--
-
-
---------在上述代码中，我们设置了 max-selection 为 2，即最多选择两个节点。当用户选择了两个节点之后，其他未选中的节点即能被勾选但不再是可点击状态。选择两个节点后，@selected-change 事件将被触发，此时我们可以获取到选择的节点，存储到 selectedNodes 中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601c81e8991b448de47c