Vue-Tree 3.x

一款高性能 vue 虚拟树控件，支持搜索，定位，拖拽等。该控件是在公司业务的基础上不断打磨出来的，提供了十分丰富强大的 API，几乎能够满足你对树控件的所有需求。该控件同时支持 vue2 以及 vue3。

> 这是原先ctree的升级版本，同时支持 vue2 和 vue3。
> 新版改变了包的名称和部分 export 模块名称。

案例

在线 demo

安装

$3

``bash yarn add @wsfe/vue-tree`

`$3`

`bash npm install @wsfe/vue-tree`

`$3`

直接引入 css

`less @import '~@wsfe/vue-tree/dist/style.css';`

引入 less 以便于变量覆盖

`less @import '~@wsfe/vue-tree/src/styles/index.less';`

`$3`

`typescript // 大家可以根据需要是否引入VTreeNode, VTreeSearch, VTreeDrop import Vtree, { VTreeNode, VTreeSearch, VTreeDrop } from '@wsfe/vue-tree' import '@wsfe/vue-tree/dist/style.css'`

`接口文档`

`VTree API`

`$3`

`$3`

注：从 2.0.8 起，事件中返回的节点信息都是包括 _parent 与 children 的完整节点信息（拖拽事件的 dataTransfer 除外）。

`$3`

`$3`

| 名称 | 说明 | | :------ | :--------------- | | empty | 暂无数据 | | loading | 加载中显示的图标 |

`$3`

注：以 '_' 开头的字段最好不要覆盖，以免影响内部处理逻辑

`VTreeSearch API`

`$3`

注：可在 VTreeSearch 上直接使用 VTree 的所有 Props

`$3`

注：可在 VTreeSearch 上直接监听 VTree 的所有 Events

| 事件名 | 说明 | 返回值 | | :----- | :----------------- | :----------- | | search | 执行搜索操作时触发 | 搜索的关键字 |

`$3`

注：可在 VTreeSearch 上直接调用 VTree 的所有 Methods

| 方法 | 说明 | 参数 | 返回值 | | :----------- | :------------- | :------------------------------------------------------- | :-------------- | | clearKeyword | 清空关键字 | 无 |void| | getKeyword | 获取搜索关键字 | 无 |string| | search | 执行搜索 |keyword: string: 搜索的关键字，默认为内部 this.keyword | Promise |

`$3`

注：可在 VTreeSearch 上直接传入 VTree 的所有 Slots

| 名称 | 说明 | | :----------- | :------------------------------------------------- | | search-input | 搜索输入框，可通过此 slot 自行封装树搜索组件的行为 | | actions | 操作按钮，可在搜索输入框后加入更多操作按钮 | | footer | 底部信息 |

`VTreeDrop API`

`$3`

注：可在 VTreeDrop 上直接使用 VTree 和 VTreeSearch 的所有 Props

`$3`

注：可在 VTreeDrop 上直接监听 VTree 和 VTreeSearch 的所有 Events

| 事件名 | 说明 | 返回值 | | :---------------------- | :--------------------- | :------------- | | dropdown-visible-change | 下拉框出现或消失时触发 | 下拉框是否可见 | | clear | 点击清空按钮时触发 | 无 |

`$3`

注：可在 VTreeDrop 上直接调用 VTree 和 VTreeSearch 的所有 Methods

`$3`

注：可在 VTreeDrop 上直接传入 VTree 和 VTreeSearch 的所有 Slots

| 名称 | 说明 | | :------ | :--------------------------------------------------- | | 默认 | 展示输入框 | | display | 展示输入框的展示文字，如果有默认 slot 则此 slot 无效 | | clear | 替换清空图标，如果有默认 slot 则此 slot 无效 |

默认 slot 与 display slot 的 Slot Props 2.3.0 ：

`typescript /* 展示 slot 的 props / slotProps: { /* 多选选中的节点 / checkedNodes: [] as TreeNode[],

/* 多选选中的节点 key / checkedKeys: [] as Array,

/* 单选选中的节点 / selectedNode: null as TreeNode | null,

/* 单选选中的节点 key / selectedKey: null as string | number | null, },`

注意： checkedNodes 与 selectedNode 只包含已加载的节点，如果设置了选中的值（比如设置了 value Prop），但没有设置树的数据，则这两个字段内容将为空；而 checkedKeys 与 selectedKey` 则会包含未加载的选中节点 key 。

Vue-Tree 3.x

> 这是原先ctree的升级版本，同时支持 vue2 和 vue3。
> 新版改变了包的名称和部分 export 模块名称。

案例

在线 demo

安装

$3

``bash yarn add @wsfe/vue-tree`

`$3`

`bash npm install @wsfe/vue-tree`

`$3`

直接引入 css

`less @import '~@wsfe/vue-tree/dist/style.css';`

引入 less 以便于变量覆盖

`less @import '~@wsfe/vue-tree/src/styles/index.less';`

`$3`

`接口文档`

`VTree API`

`$3`

注：从 2.0.8 起，事件中返回的节点信息都是包括 _parent 与 children 的完整节点信息（拖拽事件的 dataTransfer 除外）。

`$3`

| 名称 | 说明 | | :------ | :--------------- | | empty | 暂无数据 | | loading | 加载中显示的图标 |

`$3`

注：以 '_' 开头的字段最好不要覆盖，以免影响内部处理逻辑

`VTreeSearch API`

`$3`

注：可在 VTreeSearch 上直接使用 VTree 的所有 Props

`$3`

注：可在 VTreeSearch 上直接监听 VTree 的所有 Events

| 事件名 | 说明 | 返回值 | | :----- | :----------------- | :----------- | | search | 执行搜索操作时触发 | 搜索的关键字 |

`$3`

注：可在 VTreeSearch 上直接调用 VTree 的所有 Methods

`$3`

注：可在 VTreeSearch 上直接传入 VTree 的所有 Slots

`VTreeDrop API`

`$3`

注：可在 VTreeDrop 上直接使用 VTree 和 VTreeSearch 的所有 Props

`$3`

注：可在 VTreeDrop 上直接监听 VTree 和 VTreeSearch 的所有 Events

`$3`

注：可在 VTreeDrop 上直接调用 VTree 和 VTreeSearch 的所有 Methods

`$3`

注：可在 VTreeDrop 上直接传入 VTree 和 VTreeSearch 的所有 Slots

默认 slot 与 display slot 的 Slot Props 2.3.0 ：

`typescript /* 展示 slot 的 props / slotProps: { /* 多选选中的节点 / checkedNodes: [] as TreeNode[],

/* 多选选中的节点 key / checkedKeys: [] as Array,

/* 单选选中的节点 / selectedNode: null as TreeNode | null,

/* 单选选中的节点 key / selectedKey: null as string | number | null, },`

wang-tree

Vue-Tree 3.x

案例

安装

$3

$3

$3

$3

接口文档

VTree API

$3

$3

$3

$3

$3

VTreeSearch API

$3

$3

$3

$3

VTreeDrop API

$3

$3

$3

$3

wang-tree

Vue-Tree 3.x

案例

安装

$3

$3

$3

$3

接口文档

VTree API

$3

$3

$3

$3

$3

VTreeSearch API

$3

$3

$3

$3

VTreeDrop API

$3

$3

$3

$3

`$3`

`$3`

`$3`

`接口文档`

`VTree API`

`$3`

`$3`

`$3`

`$3`

`$3`

`VTreeSearch API`

`$3`

`$3`

`$3`

`$3`

`VTreeDrop API`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`接口文档`

`VTree API`

`$3`

`$3`

`$3`

`$3`

`$3`

`VTreeSearch API`

`$3`

`$3`

`$3`

`$3`

`VTreeDrop API`

`$3`

`$3`

`$3`

`$3`