vue-jstree-cor 是一个基于 Vue.js 和 jstree 的树形组件，支持异步加载，拖拽等功能，极大地方便了前端开发中的树形展示需求。本篇文章将详细介绍 vue-jstree-cor 的使用方法和注意事项，希望能为大家提供有帮助的指导。
安装和引入
通过 npm 安装 vue-jstree-cor：
npm install vue-jstree-cor
在需要使用的组件中引入：
-- -------------------- ---- -------
------ ----------------------------------------
------ ------------ ---- ----------------
------ ------- -
----------- -
------------
--
---
-基本使用
使用 vue-jstree-cor 要求将树形数据与实际的树形展示解耦，可通过配置实现。下面以简单的树形数据为例：
-- -------------------- ---- -------
----- ---- - -
-
----- ------- ------
--------- -
-
----- ------ ---- --
--
-
----- ------ ---- --
-
-
-
-<VueJstreeCor :data="data">
<template slot-scope="node">
<span>{{ node.text }}</span>
</template>
</VueJstreeCor>通过 slot 和 template 可自定义节点的展示内容，此例中只显示了节点名称，其余全部使用默认。
异步加载
异步加载是 vue-jstree-cor 的特性之一，可通过配置递归地从动态数据源中加载数据并进行展示。
{
text: 'Parent Node',
children: true
}在添加了 children: true 的节点上点击展开时，会自动调用 loadChildren 方法并传入 node 对象。
-- -------------------- ---- -------
-
---
------------------ -
------ --- --------------- -- -
---------------------------------------------------- - --------
--------- -- -
----- -------- - --------
---------------------- -- -
-- -------------- -
-------------- - --
- ---- -
-------------- - ----
-
--
-----------------
--
--
-
-loadChildren 方法接收一个节点对象参数，此处使用 Promise resolve 异步加载数据。对于最后一层节点，将 children 属性设置为空数组，以防止触发错误的加载请求。
拖拽
vue-jstree-cor 也支持拖拽功能，需要给需要拖拽节点添加 draggable 属性。
{
...
draggable: true
}同时还可以添加 drop 等事件，在拖拽结束时触发回调。
-- -------------------- ---- -------
------------- -------------- -----------
---
---------------
-------- -
--------- -
----- ---- - ---------------
------------------------------------
-
-总结
vue-jstree-cor 是一个功能强大，易于扩展的树形组件，在需要树形展示时可以大幅度节省时间和精力。最后在开发使用时要注意异步加载和拖拽事件的细节，以便更好的发挥组件作用。对于更详细的细节内容和其它开发机制的细节，可查看 jstree 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e9d9381d61a3540bbf