vTree

> Forked from wsfe/vue-tree
> 此项目基于wsfe/vue-tree, 根据自身的业务需求, 仅对部分功能做了调整或新增.
> 此项目是vue2版本的虚拟树，且仅支持vue2版本

安装

$3

``bash yarn add @teaghy/vtree`

`$3`

`bash npm install @teaghy/vtree`

`$3`

`javascript import CTree from '@teaghy/vtree' import '@teaghy/vtree/dist/style.css';`

`CTree API`

`$3`

| 属性 | 说明 | 类型 | 默认值 | |:-------------------------------- |:----------------------------------------------------------------- |:---------------------------------------------------------------------------------------------------------------- |:-------------------------------------------------------------------------------------- | | data | 传入的树数据。数据量大时，不建议通过 props 传入数据，建议用setData 方法代替 | object[]| [] | | unloadDataList | 供未加载且选中节点查询 title 字段值用的列表，格式与data 一致即可 | object[]| [] | | showUnloadCheckedNodes | 过滤已选时是否在列表后面展示未加载的已选节点 |boolean| true | | emptyText | 数据为空时显示的文本 |string| '暂无数据' | | titleField | 节点标题字段 |string| 'title' | | keyField | 节点唯一标识字段 |string| 'id' | | onDuplicateKey | 出现相同的keyField的处理方式, 默认抛出异常 |'throw' \| 'warn' | throw | | separator | 多选模式下 value 分隔符 |string| ', ' | | multiple | 是否允许节点多选 |boolean| false | | checkable | 是否可多选 |boolean| false | | selectable | 是否可单选 |boolean| false | | selected-keys(.sync) | 如果设定则 selected 状态受控 |Array| [] | | checked-keys(v-model) | 如果设定则 checked 状态受控 |Array| [] | | filteredNodeCheckable | 是否可勾选被过滤节点 |boolean| false | | cascade | 父子节点是否关联 |boolean| true | | enableLeafOnly | 是否只启用子节点，当多选且父子不关联 或 单选 时有效 | boolean| false | | disableAll | 是否禁用所有节点 |boolean| false | | defaultExpandAll | 是否默认展开所有节点 |boolean| false | | defaultExpandedKeysDeprecated | 默认展开的节点 key | Array| [] | | expandedKeys(.sync)2.2.0 | 展开的节点 key ，组件内部将会响应此 Prop 的变化 | Array| [] | | draggable | 是否可拖拽 |boolean| false | | droppable | 是否可放置 |boolean| false | | beforeDropMethod | 在放置节点之前执行的方法，返回 true 允许放置， false 可阻止放置 |(dragKey: string \| number, dropKey: string \| number, hoverPart: 'before' \| 'body' \| 'after') => boolean | () => true| | ignoreMode | 忽略模式，指定getCheckedNodes , getCheckedKeys 与 v-model 默认要忽略的部分 | 'none' \| 'parents' \| 'children'| 'none' | | autoLoad | 异步加载初始化时是否自动加载根节点 |boolean| true | | load | 异步加载方法 |(node: null \| TreeNode, resolve: Function, reject: Function) => any| 无 | | render | 节点渲染 render 函数 |(h: CreateElement, node: TreeNode) => VNode| 无 | | filterMethod | 节点过滤方法 |(keyword: string, node: TreeNode) => boolean| 无 | | expandOnFilter2.1.0 | 过滤时是否展开所有可见节点 | boolean| true | | unselectOnClick2.1.0 | 点击已选中节点是否取消选中 | boolean| true | | loading | 是否显示 loading 图标 |boolean| false | | nodeClassName | 节点根元素的 class ，传入函数以对每个节点定制 class |string \| object \| Array \| (node: TreeNode) => string \| object \| Array| 无 | | showLine2.4.0 | 是否显示连接线，可指定连接线的宽度、颜色、实线、虚线，以及是否有折线 | boolean \| { width?: number, type?: 'dashed' \| 'solid', color?: string, polyline?: boolean } | 无，如果传入的非 boolean，则默认为 { width: 1, type: 'solid', color: '#D3D3D3', polyline: false }| | animation2.4.0 | 是否启用过渡动画，目前仅控制展开收起 | boolean| 无 | | nodeMinHeight | 根据节点最小高度计算数据总高度 |number| 30 | | nodeIndent | 子节点缩进 |number| 20 | | renderNodeAmount | 渲染节点数量，可见节点数大于此值且高度超过(容器可视高度能容纳节点数 + bufferNodeAmount)则不会渲染所有可见节点 |number| 100 | | bufferNodeAmount | 当滚动到视野外的节点个数大于此值时刷新渲染节点 |number | 20 |

`$3`

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

| 事件名 | 说明 | 返回值 | |:---------------- |:-------------- |:--------------------------------------------------------------- | | input | 选中节点改变时触发 | 选中的节点 | | expand | 展开/折叠时触发 | 节点信息 | | check | 点击复选框触发 | function(node, e:{checked: bool, checkedNodes, checkedKeys}) | | uncheck | 取消勾选时触发（多选） | 被取消勾选的节点信息 | | checked-change | 勾选/取消勾选时触发（多选） | 所有被勾选节点（数组） | | select | 选择时触发 | function(node, e:{selected: bool, selectedNodes, selectedKeys}) | | unselect | 取消选中时触发（单选） | 被取消选中的节点信息 | | selected-change | 选中/取消选中时触发（单选） | 被选中节点 | | click | 点击节点时触发 | 节点信息 | | node-dblclick | 双击节点时触发 | 节点信息 | | node-right-click | 右击节点时触发 | 节点信息 | | node-dragstart | 开始拖拽节点时触发 | 节点信息, 拖拽事件对象 | | node-dragenter | dragenter 时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位'before' \| 'body' \| 'after'| | node-dragover | dragover 时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位'before' \| 'body' \| 'after'| | node-dragleave | dragleave 时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位'before' \| 'body' \| 'after'| | node-drop | 放置节点时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位'before' \| 'body' \| 'after'| | before-expand | 节点展开之前触发 | 节点信息 | | after-expand | 节点展开之后触发 |void （注：如果有展开动画，会在展开动画完成后触发） |

`$3`

`$3`

| 名称 | 说明 | |:------------ |:---------------------------------------------- | | empty | 暂无数据 | | loading | 加载中显示的图标 | | node2.4.0 | 自定义节点，slotProps 为 { node: TreeNode }| | switcherIcon | 自定义节点的展开/折叠图标，slotProps 为{ node: TreeNode } |

`$3`

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

`CTreeSearch API`

`$3`

注：可在 CTreeSearch 上直接使用 CTree 的所有 Props

`$3`

注：可在 CTreeSearch 上直接监听 CTree 的所有 Events

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

`$3`

注：可在 CTreeSearch 上直接调用 CTree 的所有 Methods

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

`$3`

注：可在 CTreeSearch 上直接传入 CTree 的所有 Slots

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

`CTreeDrop API`

`$3`

注：可在 CTreeDrop 上直接使用 CTree 和 CTreeSearch 的所有 Props

`$3`

注：可在 CTreeDrop 上直接监听 CTree 和 CTreeSearch 的所有 Events

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

`$3`

注：可在 CTreeDrop 上直接调用 CTree 和 CTreeSearch 的所有 Methods

`$3`

注：可在 CTreeDrop 上直接传入 CTree 和 CTreeSearch 的所有 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 。

vTree

> Forked from wsfe/vue-tree
> 此项目基于wsfe/vue-tree, 根据自身的业务需求, 仅对部分功能做了调整或新增.
> 此项目是vue2版本的虚拟树，且仅支持vue2版本

安装

$3

``bash yarn add @teaghy/vtree`

`$3`

`bash npm install @teaghy/vtree`

`$3`

`javascript import CTree from '@teaghy/vtree' import '@teaghy/vtree/dist/style.css';`

`CTree API`

`$3`

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

`$3`

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

`CTreeSearch API`

`$3`

注：可在 CTreeSearch 上直接使用 CTree 的所有 Props

`$3`

注：可在 CTreeSearch 上直接监听 CTree 的所有 Events

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

`$3`

注：可在 CTreeSearch 上直接调用 CTree 的所有 Methods

`$3`

注：可在 CTreeSearch 上直接传入 CTree 的所有 Slots

`CTreeDrop API`

`$3`

注：可在 CTreeDrop 上直接使用 CTree 和 CTreeSearch 的所有 Props

`$3`

注：可在 CTreeDrop 上直接监听 CTree 和 CTreeSearch 的所有 Events

`$3`

注：可在 CTreeDrop 上直接调用 CTree 和 CTreeSearch 的所有 Methods

`$3`

注：可在 CTreeDrop 上直接传入 CTree 和 CTreeSearch 的所有 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, },`