wang-tree

v3.0.9

Published

a year ago

A vue tree component using virtual list.

Downloads

0High
0Medium
0Low

maomaohou

vue vue2 vue3 tree select tree select virtualtree virtual tree virtual-tree vue-tree vue tree vue tree component 虚拟树

Vue-Tree 3.x

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

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

案例

在线 demo

安装

yarn 安装方式

yarn add @wsfe/vue-tree

npm 安装方式

npm install @wsfe/vue-tree

样式引入

直接引入 css

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

引入 less 以便于变量覆盖

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

使用方式

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

接口文档

VTree API

VTree Props

VTree Events

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

VTree Methods

VTree Slots

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

VTree Data Fields

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

VTreeSearch API

VTreeSearch Props

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

VTreeSearch Events

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

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

VTreeSearch Methods

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

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

VTreeSearch Slots

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

VTreeDrop API

VTreeDrop Props

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

VTreeDrop Events

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

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

VTreeDrop Methods

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

VTreeDrop Slots

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

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

默认 slot 与 display slot 的 Slot Props 2.3.0 ：

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

  /** 多选选中的节点 key */
  checkedKeys: [] as Array<string | number>,

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

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

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