@hu2014/vue-virtual-tree

v1.0.5

Published

a year ago

一款性能及其优秀的树形组件

Downloads

0High
0Medium
0Low

hu2014

hu2014 vue-tree tree virtual-tree 虚拟树滚动加载

vue-Tree

安装

npm i @hu2014/vue-virtual-tree 或者 yarn add @hu2014/vue-virtual-tree

github地址：https://github.com/hu2014/vue-tree 在线文档地址：https://hu2014.github.io/vue-tree/

功能说明

支持百万级树形加载，不超过2S;
支持拖拽排序；
十万级别子节点勾选不卡顿；
隐藏指定节点checkbox

树形展示

Alt text

拖拽展示

Alt text

vue-Tree Props

vue-Tree Events

| 事件名 | 说明 | 返回值 | |:-----------------|:----------------------------|:----------------------------------------------------------------------------| | input | 选中节点改变时触发 | 选中的节点 | | expand | 展开/折叠时触发 | 节点信息 | | check | 勾选时触发（多选） | 被勾选的节点信息 | | uncheck | 取消勾选时触发（多选） | 被取消勾选的节点信息 | | checked-change | 勾选/取消勾选时触发（多选） | 所有被勾选节点（数组） | | select | 选中时触发（单选） | 被选中的节点信息 | | 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' |

vue-Tree Methods

vue-Tree Slots

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

vue-Tree Data Fields

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

| 字段 | 说明 | |:---------------|:--------------------------------------------------------------------------------| | id | 默认以 'id' 作为 key 字段，也可以通过 keyField Prop 指定其他字段作为 key 字段 | | title | 默认显示的名称，可通过 titleField Prop 指定其他字段作为 title 字段 | | checked | 多选模式下是否勾选 | | selected | 单选模式下是否选中 | | indeterminate | 多选模式下是否半选状态 | | disabled | 是否禁用 | | expand | 父节点有效，节点展开状态 | | visible | 是否可见 | | _filterVisible | 过滤后是否可见，如果为 false 则在其他可见情况下也是不可见的 | | _parent | 父节点 | | children | 子节点数组 | | isLeaf | 标记节点是否为叶子节点 | | _level | 节点层级，默认从 0 开始 | | _loading | 节点是否正在加载 | | _loaded | 节点是否已经加载过，异步加载下有效 | |hidecheck |是否隐藏当前节点的checkbox |

vue-TreeSearch API

vue-TreeSearch Props

注：可在 vue-TreeSearch 上直接使用 vue-Tree 的所有 Props

| 属性 | 说明 | 类型 | 默认值 | |:---------------------|:-----------------------------------------------------------------------------------|:---------------------------------------------|:-------------| | searchPlaceholder | 搜索输入框的 placeholder | string | '搜索关键字' | | showCheckAll | 是否显示全选复选框 | boolean | true | | showCheckedButton | 是否显示已选按钮 | boolean | true | | checkedButtonText | 已选按钮文字 | string | '已选' | | showFooter | 是否显示底部信息 | boolean | true | | searchMethod | 如果传入此 Prop ，触发 search 事件后将会执行此方法，否则会执行组件内置的搜索方法 | (keyword: string) => void \| Promise<void> | 无 | | searchLength | 触发搜索的字符长度 | number | 1 | | searchDisabled | 禁用搜索功能 | boolean | false | | searchRemote | 是否远程搜索，传入 searchMethod 时无效 | boolean | false | | searchDebounceTime | 搜索防抖时间，单位为毫秒 | number | 300 |

vue-TreeSearch Events

注：可在 vue-TreeSearch 上直接监听 vue-Tree 的所有 Events

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

vue-TreeSearch Methods

注：可在 vue-TreeSearch 上直接调用 vue-Tree 的所有 Methods

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

vue-TreeSearch Slots

注：可在 vue-TreeSearch 上直接传入 vue-Tree 的所有 Slots

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

vue-TreeDrop API

vue-TreeDrop Props

注：可在 vue-TreeDrop 上直接使用 vue-Tree 和 vue-TreeSearch 的所有 Props

| 属性 | 说明 | 类型 | 默认值 | |:---------------------------|:---------------------------------------------------------------------------------|:----------------------------------------------------------------------------------|:---------------| | dropHeight | 下拉内容高度 | number | 300 | | dropPlaceholder | 展示输入框 placeholder | string | 无 | | dropDisabled | 是否禁用 | boolean | false | | clearable | 允许清空 | boolean | false | | placement | 下拉弹出框位置，注意！！不支持自动识别方向 | 'bottom-start' \| 'bottom-end' \| 'bottom' \| 'top-start' \| 'top-end' \| 'top' | 'bottom-start' | | transfer | 将下拉 DOM 转移到 body 中 | boolean | false | | dropdownClassName | 在下拉框容器上额外添加的 class | string \| string[] | 无 | | dropdownMinWidth | 下拉框容器最小宽度，未指定则默认为展示输入框宽度。适合 transfer 为 false 时使用 | number | 无 | | dropdownWidthFixed | 固定下拉框容器宽度，当内容超出最小宽度不会伸长，而是出现横向滚动条 | boolean | false |

vue-TreeDrop Events

注：可在 vue-TreeDrop 上直接监听 vue-Tree 和 vue-TreeSearch 的所有 Events

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

vue-TreeDrop Methods

注：可在 vue-TreeDrop 上直接调用 vue-Tree 和 vue-TreeSearch 的所有 Methods

vue-TreeDrop Slots

注：可在 vue-TreeDrop 上直接传入 vue-Tree 和 vue-TreeSearch 的所有 Slots

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

默认 slot 与 display slot 的 Slot Props ：

/** 展示 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 。