API

BaseTree#

props#

idKey#

{ type: String, default: "id" }

parentIdKey#

{ type: String, default: "parent_id" }

childrenKey#

{ type: String, default: "children" }

textKey#

{ type: String, default: "text" }

flatData#

{
  type: Array
}

treeData#

{
  type: Array
}

indent#

{ type: Number, default: 20 }

gap#

{
  type: Number
}

rtl#

{ type: Boolean, default: false }

virtualization#

{ type: Boolean, default: false }

virtualizationPrerender#

{ type: Number, default: 20 }

childrenLazyLoading#

{ type: Boolean, default: false }

childrenLoader#

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

defaultFolded#

{ type: Boolean, default: false }

data#

nodes#

Node[]

nodesByID#

Record<string, Node>

trees#

{[treeID:string]: Node}

dragging#

boolean

treeID#

string

tree#

vm of tree

this

computed#

visibleNodes#

Node[]

events#

fold#

(node: Node)

unfold#

(node: Node)

load-children#

For children lazy load. Start to load children

(node: Node)

load-children-success#

For children lazy load

(node: Node)

load-children-error#

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

(node: Node)

methods#

countChildren#

(node: Node | undefined): number

addNode#

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

moveNode#

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

removeNode#

(node: Node): void;

outputNestedData#

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

outputFlatData#

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

isNodeParentFolded#

(node: Node): boolean;

isNodeVisible#

(node: Node): boolean;

foldAll#

(): void;

unfoldAll#

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

unfold#

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

toggleFold#

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

updateChecked#

(node: Node): void;

getAllCheckedNodes#

(): Node[];

Draggable#

The draggable tree component. It extends BaseTree.

props#

triggerClass#

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

triggerBySelf#

Boolean

draggable#

{ type: Boolean, default: true }

droppable#

{ type: Boolean, default: true }

eachDraggable#

{
  type: [Boolean, Function]
}

Function type is eachDraggableFunc

eachDroppable#

{
  type: [Boolean, Function]
}

Function type is eachDraggableFunc

rootDraggable#

{ type: Boolean, default: true }

rootDroppable#

{ type: Boolean, default: true }

ondragstart#

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

ondragend supports promise, but ondragstart does not.

ondragend#

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

ondragend supports promise, but ondragstart does not.

The data is not updated in ondragend.

afterPlaceholderCreated#

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

placeholderMaxHeight#

{ type: Number, default: 100 }

unfoldWhenDragover#

{ type: Boolean, default: true }

unfoldWhenDragoverDelay#

{ type: Number, default: 80 }

isNodeUnfoldable#

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

draggingNodePositionMode#

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

preventTextSelection#

{ type: Boolean, default: true }

edgeScroll#

{
  type: Boolean
}

edgeScrollTriggerMargin#

{ type: Number, default: 50 }

edgeScrollSpeed#

{ type: Number, default: 0.35 }

edgeScrollTriggerMode#

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

edgeScrollSpecifiedContainerX#

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

edgeScrollSpecifiedContainerY#

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

data#

draggingNode#

Node | null

store#

Runtime data of drag and drop.

Store3 | null

events#

drag#

Emit when drag start.

(store: Store3)

before-first-move#

Same with drag

(store: Store3)

drop#

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

(store: Store3)

drop-into#

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

(store: Store3)

drop-change#

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

(store: Store3)

methods#

isParentDragging#

(node: Node): boolean;

Other#

Draggable#

The Vue instance(vm) of the Draggable component.

eachDraggableFunc#

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

PositionMode#

'top_left_corner' | 'mouse'

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;
}

EventPosition#

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

EventPosition2#

{
  x: number
  y: number
}

obj#

{
  string: unknown
}

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;
}

Node#

obj & BaseNode