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