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