he-tree
1.x ​
​
he-tree
​​

API

BaseTree#

props#

idKey#

{ type: String, default: "id" }
ts
​

parentIdKey#

{ type: String, default: "parent_id" }
ts
​

childrenKey#

{ type: String, default: "children" }
ts
​

textKey#

{ type: String, default: "text" }
ts
​

flatData#

{
  type: Array
}
ts
​

treeData#

{
  type: Array
}
ts
​

indent#

{ type: Number, default: 20 }
ts
​

gap#

{
  type: Number
}
ts
​

rtl#

{ type: Boolean, default: false }
ts
​

virtualization#

{ type: Boolean, default: false }
ts
​

virtualizationPrerender#

{ type: Number, default: 20 }
ts
​

childrenLazyLoading#

{ type: Boolean, default: false }
ts
​

childrenLoader#

(
  node: Node,
  vm: ComponentPublicInstance
) => Promise<Node[]>;
ts
​

defaultFolded#

{ type: Boolean, default: false }
ts
​

data#

nodes#

Node[]
ts
​

nodesByID#

Record<string, Node>
ts
​

trees#

{[treeID:string]: Node}
ts
​

dragging#

boolean
ts
​

treeID#

string
ts
​

tree#

vm of tree

this
ts
​

computed#

visibleNodes#

Node[]
ts
​

events#

fold#

(node: Node)
ts
​

unfold#

(node: Node)
ts
​

load-children#

For children lazy load. Start to load children

(node: Node)
ts
​

load-children-success#

For children lazy load

(node: Node)
ts
​

load-children-error#

For children lazy load. Get error by node.$childrenLoadStaus.error.

(node: Node)
ts
​

methods#

countChildren#

(node: Node | undefined): number
ts
​

addNode#

(node: obj, parentId: number | string | null, index?: number): void;
ts
​

moveNode#

(node: Node, parentId: number | string | null, index?: number): void;
ts
​

removeNode#

(node: Node): void;
ts
​

outputNestedData#

(parent: Node | null, ignoreKeys?: string[], _returnFlat?: boolean | undefined): obj[];
ts
​

outputFlatData#

(parent: Node | null, ignoreKeys?: string[]): Record<string, unknown>[];
ts
​

isNodeParentFolded#

(node: Node): boolean;
ts
​

isNodeVisible#

(node: Node): boolean;
ts
​

foldAll#

(): void;
ts
​

unfoldAll#

(node?: Node | undefined): Promise<void> | undefined;
ts
​

unfold#

(node: Node): void | Promise<void>;
ts
​

toggleFold#

(node: Node): void | Promise<void>;
ts
​

updateChecked#

(node: Node): void;
ts
​

getAllCheckedNodes#

(): Node[];
ts
​

Draggable#

The draggable tree component. It extends BaseTree.

props#

triggerClass#

{ type: String, default: "tree-node" }
ts
​

triggerBySelf#

Boolean
ts
​

draggable#

{ type: Boolean, default: true }
ts
​

droppable#

{ type: Boolean, default: true }
ts
​

eachDraggable#

{
  type: [Boolean, Function]
}
ts
​

Function type is eachDraggableFunc

eachDroppable#

{
  type: [Boolean, Function]
}
ts
​

Function type is eachDraggableFunc

rootDraggable#

{ type: Boolean, default: true }
ts
​

rootDroppable#

{ type: Boolean, default: true }
ts
​

ondragstart#

{
  type: Function as PropType<(store: Store3) => boolean>
}
ts
​

ondragend supports promise, but ondragstart does not.

ondragend#

{
  type: Function as PropType<(store: Store3) => boolean>
}
ts
​

ondragend supports promise, but ondragstart does not.

The data is not updated in ondragend.

afterPlaceholderCreated#

(placeholder: HTMLElement, store: Store3) => void
ts
​

placeholderMaxHeight#

{ type: Number, default: 100 }
ts
​

unfoldWhenDragover#

{ type: Boolean, default: true }
ts
​

unfoldWhenDragoverDelay#

{ type: Number, default: 80 }
ts
​

isNodeUnfoldable#

{
type: Function as PropType<(store: Store3) => boolean>,
}
ts
​

draggingNodePositionMode#

{
type: String as PropType<PositionMode>,
default: "top_left_corner",
}
ts
​

preventTextSelection#

{ type: Boolean, default: true }
ts
​

edgeScroll#

{
  type: Boolean
}
ts
​

edgeScrollTriggerMargin#

{ type: Number, default: 50 }
ts
​

edgeScrollSpeed#

{ type: Number, default: 0.35 }
ts
​

edgeScrollTriggerMode#

{
type: String as PropType<PositionMode>,
default: "top_left_corner",
}
ts
​

edgeScrollSpecifiedContainerX#

HTMLElement | ((store: Store3) => HTMLElement)
ts
​

edgeScrollSpecifiedContainerY#

HTMLElement | ((store: Store3) => HTMLElement)
ts
​

data#

draggingNode#

Node | null
ts
​

store#

Runtime data of drag and drop.

Store3 | null
ts
​

events#

drag#

Emit when drag start.

(store: Store3)
ts
​

before-first-move#

Same with drag

(store: Store3)
ts
​

drop#

Emit when drag end. Emit to drag start/source tree.

(store: Store3)
ts
​

drop-into#

Emit when drag end. Emit to drag end/target tree.

(store: Store3)
ts
​

drop-change#

Emit when the tree changed by drag. Emit to both drag start and end tree.

(store: Store3)
ts
​

methods#

isParentDragging#

(node: Node): boolean;
ts
​

Other#

Draggable#

The Vue instance(vm) of the Draggable component.

eachDraggableFunc#

type eachDraggableFunc = (
  node: Node | undefined,
  store: Store3,
  options: Options2,
  vm: Draggable
) => boolean | undefined
ts
​

PositionMode#

'top_left_corner' | 'mouse'
ts
​

Store3#

Runtime data of drag and drop.

interface {
  // Store
  movedCount: number;
  listenerElement: HTMLElement;
  directTriggerElement: HTMLElement;
  triggerElement: HTMLElement;
  startEvent: MouseOrTouchEvent;
  moveEvent: MouseOrTouchEvent;
  endEvent: MouseOrTouchEvent;
  mouse: EventPosition;
  initialMouse: EventPosition;
  move: EventPosition2;
  movedOrClonedElement: HTMLElement;
  movedElement: HTMLElement;
  initialPosition: EventPosition2;
  initialPositionRelativeToViewport: EventPosition2;
  updateMovedElementStyle: () => void;
  _isMovingElementCloned: boolean;
  // Store2
  startTreeEl: HTMLElement;
  targetTreeEl: HTMLElement;
  placeholder: HTMLElement;
  // Store3
  startTree: Draggable;
  targetTree: Draggable;
  draggingNode: Node;
  startPath: {
      tree: Draggable;
      parent?: Node;
      index: number;
  };
  targetPath: Store3["startPath"]; // same to startPath
  placeholderLevel: number;
  placeholderPrevNode?: Node;
  placeholderPrevNodeInTree?: Node;
  dragChanged?: boolean;
  isCloned?: boolean;
}
ts
​

EventPosition#

{
  x: number, y: number,
  pageX: number,
  pageY: number,
  clientX: number,
  clientY: number,
  screenX: number,
  screenY: number
}
ts
​

EventPosition2#

{
  x: number
  y: number
}
ts
​

obj#

{
  string: unknown
}
ts
​

BaseNode#

{
    $id: string | number;
    $pid?: string | number;
    $level: number;
    $hidden?: boolean;
    $folded?: boolean;
    $checked?: boolean | 0;
    $children: Node[];
    $childrenLoading?: boolean;
    $childrenLoadStaus?: {
      status: 'success'|'error',
      error: Error
    };
    $draggable?: boolean;
    $droppable?: boolean;
    $nodeStyle?: string | Record<string, string> | unknown;
    $nodeClass?: string | unknown;
    $outerStyle?: string | Record<string, string> | unknown;
    $outerClass?: string | unknown;
}
ts
​

Node#

obj & BaseNode
ts
​