介绍
vue-drag-sort-tree 是一个 Vue.js 的可拖拽树形组件。通过使用该组件，用户可以方便地对树形结构进行拖拽排序。
安装
要安装该 npm 包，请在控制台中运行以下命令：
npm install vue-drag-sort-tree --save
使用
在使用 vue-drag-sort-tree 之前，你需要导入它，并将其注册到 Vue 中。可以使用下面的示例代码：
-- -------------------- ---- -------
----------
---- ---------
---------------- --------------------- --------------------- ---------------------------------------------- --
------
-----------
--------
------ --------------- ---- ---------------------
------ ------- -
----------- -
----------------
--
------ -
------ -
--------- -
-
------ ----- ---
--------- -
-
------ ----- -----
--------- ---
--
--
--
-
------ ----- ---
--------- -
-
------ ----- -----
--------- ---
--
--
--
--
--
--
-------- -
--------------------------------- -------- -
--------------------- ---------
--
--
--
---------API 文档
Props
| Name | Type | Default Value | Description |
|---|---|---|---|
| tree-data | Array | 接受一个节点数据的数组，作为树形结构的数据源 | |
| show-checkbox | Boolean | false | 是否在每个节点前面显示复选框 |
| check-on-click | Boolean | true | 点击节点时是否触发复选框的点击事件 |
| drag-icon-class | String | 指定拖拽时节点的图标的样式类名 | |
| drop-icon-class | String | 指定拖拽时允许放置的区域的图标的样式类名 | |
| collapse-icon | String | - | 指定折叠图标的样式（接受一个 SVG path 字符串） |
| expand-icon | String | - | 指定展开图标的样式（接受一个 SVG path 字符串） |
| check-icon | String | - | 指定选中节点时复选框的样式（接受一个 SVG path 字符串） |
| uncheck-icon | String | - | 指定未选中节点时复选框的样式（接受一个 SVG path 字符串） |
| disabled-icon | String | - | 指定被禁用节点时复选框的样式（接受一个 SVG path 字符串） |
| allow-drop | Function | 一个函数，接受两个参数：（draggingNodeData, dropParentNodeData）用于控制是否允许拖拽节点放到指定容器 | |
| allow-drag | Function | 一个函数，接受一个参数：（draggingNodeData）用于控制是否允许拖拽指定节点 | |
| drop-target-level | Number | 设置允许放置到的目标节点的最大级别 | |
| drop-target-node | Object | 指定拖拽结束后节点作为目标节点的父节点，接受一个节点数据对象 | |
| auto-expand | Boolean/String | false | 是否在拖拽时自动展开父级节点。如果值为 'always' ，则始终展开父级节点，值为 'hover' 则只在拖拽上方时展开 |
| max-level | Number | 最大允许的节点层级 | |
| container-class | String | - | 指定容器的 CSS 类名 |
| custom-checkbox | Boolean | false | 是否使用自定义复选框，接受一个渲染函数 |
| check-all-child | Boolean | false | 指定是否当选中某个父节点时，自动选中其下所有子节点 |
| empty-text | String | '没有数据' | 没有数据时，显示的文本 |
| show-icon | Boolean/String | true | 是否显示图标，或者是哪个位置显示图标（'left'/'right'） |
事件
| Name | Description |
|---|---|
| node-checked-change | 在节点的复选框状态改变时触发，传递两个参数：nodeData, checked |
| node-clicked | 当点击节点时触发，传递一个参数：nodeData |
| node-collapse-change | 当节点的折叠状态发生变化时触发，传递两个参数：nodeData, collapsed |
示例代码
下面是一个示例代码：
-- -------------------- ---- -------
----------
---- ---------
---------------- --------------------- ----------------------- ----------------------- --
------
-----------
--------
------ --------------- ---- ---------------------
------ ------- -
----------- -
----------------
--
------ -
------ -
--------- -
-
--- --
------ ----- ---
--------- -
-
--- --
------ ----- -----
--------- ---
--
--
--
-
--- --
------ ----- ---
--------- -
-
--- --
------ ----- -----
--------- ---
--
--
--
--
--
--
-------- -
--------------------------- -
------ ------------------- --- --
--
--------------------------- ------------------- -
------ --------------------- --- --
--
--
--
---------该代码使用了 allowDrag 和 allowDrop 两个函数来控制哪些节点能够被拖拽，哪些容器能够接受拖拽节点。其中，节点的 id 是嵌套深度优先的形式。
结语
vue-drag-sort-tree 为前端工程师提供了一种非常方便和可定制的可拖拽树形组件解决方案。通过该组件，我们可以轻松地实现对树状结构的快速排序。欢迎大家在实际开发中进行尝试，发现其中更多优化空间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cda81e8991b448e685f