使用指南

安装#

# Vue3
npm i --save @he-tree/vue
# Vue2
npm i --save @he-tree/vue @vue/composition-api
sh

CDN#

引入#

Vue3#

import { BaseTree, Draggable } from '@he-tree/vue'
import '@he-tree/vue/style/default.css'
ts

Vue2#

import { BaseTree, Draggable } from '@he-tree/vue/vue2'
import '@he-tree/vue/style/default.css'
ts

BaseTree 是基础树组件. Draggable 组件继承于 BaseTree.

示例#

示例项目#

基础#

Projects
Frontend
Vue
Nuxt
React
Next
Angular
Backend
Photos
Videos

折叠与勾选框#

Checked: []
Projects
Frontend
Vue
Nuxt
React
Next
Angular
Backend
Photos
Videos

仅提供折叠与勾选的逻辑, 你需要通过 Vue 插槽传入你自己的样式代码. 其中stat.checked 有 3 个值:true, false, null. null表示子级部分选中, 你可以用其确定半选状态. 相关方法: getChecked, getUnchecked, updateCheck, openAll, closeAll, isVisible.

拖拽#

Projects
Frontend
Vue
Nuxt
React
Next
Angular
Backend
Photos
Videos

节点缩进#

不要用 css 设置节点缩进, 而是用 prop indent.

数据#

数据为树形数据, 不支持平面数据. 平面数据需要你自行转换. 其中键名children可以通过 prop childrenKey修改, text可以通过 prop textKey修改. 例如:

{
  text: 'Root',
  children: [
    {text: 'Child'}
  ]
}
js

数据更新(内部行为)#

可以使用v-model绑定数据. 本组件会复制数据对象作为内部数据. 当内部数据变动时, 例如拖拽时, 有 3 种方式提交新数据到外部. 默认情况下直接修改绑定的数据对象. 通过 prop updateBehavior设置. updateBehavior 的值:

  • modify: 直接修改绑定的数据对象.
  • new: 提交一个新的数据对象, 适用于 vuex.
  • disabled: 不提交. 你可以使用getData方法手动生成并获取当前数据.

数据修改(外部操作)#

绑定的数据对象由外部改变时, 组件内部将会为每一个节点创建stat对象, 用来存储相关信息, 如 open, parent, children, level. 可通过钩子 prop statHandler 在 stat 创建之后修改每一个 stat. 相关 data: stats, statsFlat.

操作数据的方法: getStat, has, updateCheck, getChecked, getUnchecked, openAll, closeAll, isVisible, move, add, addMulti, remove, removeMulti, iterateParent, getSiblings, getData.

虚拟列表#

Projects
Frontend
Vue
Nuxt
React
Next
Angular
Backend
Photos
Videos
Node-755
Node-248
Node-342
Node-578
Node-454
Node-535
Node-339
Node-146
Node-628
Node-280
Node-840
Node-290

使用虚拟列表时需要给树或其父元素设置高度, 否则会自动扩展高度为最大. 相关 props: virtualization, virtualizationPrerenderCount

虚拟列表由我的另一个库virtual-list实现. virtual-list.

默认展开所有节点#

相关 props: defaultOpen

从右到左显示#

相关 props: rtl

从下到上显示#

相关 props: btt

Angular
Next
React
Nuxt
Vue
Frontend
Projects

渲染为表格#

actionTextLevel
Projects1
Frontend2
Vue3
Nuxt4
React3
Next4
Angular3
Backend2
Photos1
Videos1
actionTextLevel

支持虚拟列表与表格同时工作. 相关 props: table. 通过插槽 prepend, append 添加表头和表底部. 表格拖拽为高级功能, 需购买pro启用.

拖拽相关#

自定义触发拖拽的元素#

相关 props: triggerClass

拖拽控制/可拖拽/可拖放#

可通过节点stat控制每个节点. 也可通过钩子函数控制. 相关 props: disableDrag, disableDrop, eachDraggable, eachDroppable, rootDroppable, maxLevel

拖拽时限制最大层数/深度#

相关 props: maxLevel

拖拽到节点上时打开该节点#

当把节点拖动到一个折叠节点上时, 默认会打开此节点以便拖入其中. 可通过 prop dragOpen控制. 可通过 prop dragOpenDelay设置等待时间. 钩子 prop: beforeDragOpen

占位元素#

拖拽时, 会生成一个元素默认淡蓝色背景, 用以标识可放置的位置. 使用插槽placeholder控制它, 例如添加提示文字.

拖拽时, 如果离开树, 占位元素将会被删掉, 如果此时停止拖拽, 树将恢复原状. 通过 prop keepPlaceholder可使占位元素在拖拽结束前一直保留.

拖拽时相关信息#

拖拽时相关信息不在事件或钩子函数的参数里, 而是暴露为一个对象 dragContext.

// vue3
import { dragContext } from '@he-tree/vue'
// vue2
import { dragContext } from '@he-tree/vue/vue2'
ts

外部拖入#

外部拖入指外部的信息通过 Drag and Drop API 拖入树内. 可以通过钩子 props: onExternalDragOver, externalDataHandler 处理这一情况. 以此可实现与任何组件通过 Drag and Drop API 互通.

触摸 & 移动设备#

此组件基于 HTML5 Drag and Drop API, 所以在支持 Drag and Drop API 到移动设备上也能工作. 如果不支持, 可以尝试使设备兼容 Drag and Drop API 的库.

水印#

此组件会在浏览器控制台输出一条水印信息. 可使用 prop watermark关闭.

Pro#

pro 有以下高级功能.

  • 跨树拖拽.

  • 拖拽开始时克隆原节点而不是移动原节点.

  • 可拖拽表格.

    详情请点击.