FaTree

Retains ElTree selection, checkboxes, dragging, lazy loading and node operations. Adds a title, an all-nodes entry, filtering, collapsible navigation, label synchronization and asynchronous loading. Height follows the caller or container without an additional mobile minimum height. Card borders use the Element Plus theme.

Basic

View code

Vue

<template>
	<FaTree v-model="value" v-model:label="label" :data="data" title="文档导航" :width="280" @change="handleChange" />
	<p style="margin: 14px 0 0; color: var(--el-text-color-secondary)">
		当前节点：{{ label }}（{{ value }}）；change 数据：{{ JSON.stringify(changedData) }}（{{ changeCount }} 次）
	</p>
</template>

<script setup lang="ts">
import { ref } from "vue";

const value = ref<string | number | boolean | object | null>("table");
const label = ref("表格组件");
const changedData = ref<unknown>();
const changeCount = ref(0);
const data = [
	{
		value: "components",
		label: "组件",
		children: [
			{ value: "form", label: "表单组件" },
			{ value: "table", label: "表格组件" },
			{ value: "upload", label: "上传组件" },
		],
	},
	{
		value: "guide",
		label: "开发指南",
		children: [{ value: "install", label: "安装与使用" }],
	},
];

const handleChange = (data: unknown): void => {
	changedData.value = data;
	changeCount.value++;
};
</script>

Checkbox Slots

View code

Vue

<template>
	<FaTree :data="data" title="功能目录" :width="340" show-checkbox draggable>
		<template #label="{ node }"
			><strong>{{ node.label }}</strong></template
		>
		<template #default="{ data: item }"><ElTag v-if="item.disabled" size="small" type="info">禁用</ElTag></template>
	</FaTree>
</template>

<script setup lang="ts">
const data = [
	{
		value: "components",
		label: "组件",
		showQuantity: true,
		quantity: 26,
		children: [
			{ value: "form", label: "表单", showQuantity: true, quantity: 4 },
			{ value: "table", label: "表格", showQuantity: true, quantity: 2 },
			{ value: "upload", label: "上传", disabled: true },
		],
	},
	{ value: "guide", label: "开发指南", showQuantity: true, quantity: 3 },
];
</script>

Async Tree

View code

Vue

<template>
	<div class="demo-stack">
		<ElButton :loading="treeRef?.loading" @click="treeRef?.refresh()">重新请求树数据</ElButton>
		<FaTree ref="treeRef" :request-api="requestApi" title="异步目录" :width="360" />
	</div>
</template>

<script setup lang="ts">
import { useTemplateRef } from "vue";

interface TreeExpose {
	loading: boolean;
	refresh: () => Promise<void>;
}

const treeRef = useTemplateRef<TreeExpose>("treeRef");
let version = 0;
const requestApi = async (): Promise<Record<string, unknown>[]> => {
	await new Promise<void>((resolve) => {
		window.setTimeout(resolve, 400);
	});
	version++;
	return [
		{ value: "components", label: `组件（刷新 ${version}）`, children: [{ value: "table", label: "表格" }] },
		{ value: "sdk", label: "SDK", children: [{ value: "net", label: "Fast.NET" }] },
	];
};
</script>

Node Operations

View code

Vue

<template>
	<div class="demo-stack">
		<div class="demo-row">
			<ElButton @click="treeRef?.setCheckedKeys?.(['element'])">选中组件库</ElButton>
			<ElButton @click="treeRef?.append?.({ value: 'admin', label: 'Fast.Admin' }, 'root')">追加节点</ElButton>
			<ElButton @click="treeRef?.remove?.('admin')">删除追加节点</ElButton>
			<ElButton type="primary" @click="readChecked">读取选中 Key</ElButton>
		</div>
		<FaTree ref="treeRef" :data="data" hide-all hide-filter show-checkbox node-key="value" :width="360" />
		<span class="demo-value">选中 Key：{{ checked }}</span>
	</div>
</template>

<script setup lang="ts">
import { ref, useTemplateRef } from "vue";

interface TreeExpose {
	append?: (data: Record<string, unknown>, parent: string) => void;
	getCheckedKeys?: () => unknown[];
	remove?: (key: string) => void;
	setCheckedKeys?: (keys: string[]) => void;
}

const treeRef = useTemplateRef<TreeExpose>("treeRef");
const checked = ref("暂无");
const data = [
	{
		value: "root",
		label: "Fast 系列",
		children: [
			{ value: "element", label: "Fast.Element.Plus" },
			{ value: "net", label: "Fast.NET" },
		],
	},
];

const readChecked = (): void => {
	checked.value = treeRef.value?.getCheckedKeys?.().join("、") || "暂无";
};
</script>

FaTree Complete API

Props (40)

Fast and Element Plus 2.14.6 props are merged below. Fast changes appear first; native props that are not forwarded remain visible for compatibility review.

Property	Source	Description	Type	Default
data	Fast override	Component data.	Array	Fast[]EL[]
nodeKey	Fast override	Unique tree-node key.	String	FastvalueEL—
props	Fast override	Field mappings.	Object	Fast{"children":"children","label":"label","disabled":"disabled"}EL{"children":"children","label":"label","disabled":"disabled"}
filterNodeMethod	Fast override	Tree filter; false hides the node.	Function	Fast—EL—
disabled	Fast addition	Disable the component or current option.	Boolean	false
collapseOnClickNode	Fast addition	Collapse expanded siblings when a tree node is clicked.	Boolean	false
modelValue	Fast addition	v-model value.	String / Number / Boolean / Object	false
label	Fast addition	Display text or synchronized label.	String	—
width	Fast addition	Component width.	String / Number	180
defaultSelection	Fast addition	Initially selected tree node value.	String / Number	—
title	Fast addition	Component title.	String	—
hamburger	Fast addition	Show tree collapse controls.	Boolean	false
hideAll	Fast addition	Hide the tree's All node.	Boolean	false
hideFilter	Fast addition	Hide the tree filter input.	Boolean	false
allValue	Fast addition	Model value for the tree's All node.	String / Number / Boolean / Object	false
requestApi	Fast addition	Asynchronous data-request function.	Function	—
initParam	Fast addition	Initial request parameters.	String / Number / Object	—
emptyText	EL native	Empty-state text.	String	—
renderAfterExpand	EL native	Render children only after first expansion.	Boolean	true
checkStrictly	EL native	Check parent and child nodes independently.	Boolean	false
defaultExpandAll	EL native	Expand all nodes by default.	Boolean	true
expandOnClickNode	EL native	Expand/collapse when node content is clicked.	Boolean	true
checkOnClickNode	EL native	Toggle checking when a tree node is clicked.	Boolean	true
checkOnClickLeaf	EL native	Toggle checking when a leaf is clicked.	Boolean	true
checkDescendants	EL native	Check loaded descendants of a checked parent.	Boolean	false
autoExpandParent	EL native	Automatically expand parents when expanding a node.	Boolean	true
defaultCheckedKeys	EL native	Initially checked node keys.	Array	—
defaultExpandedKeys	EL native	Initially expanded node keys.	Array	—
currentNodeKey	EL native	Initially current node key.	String / Number	—
renderContent	EL native	Custom tree-node renderer.	Function	—
showCheckbox	EL native	Show tree-node checkboxes.	Boolean	false
draggable	EL native	Allow dragging.	Boolean	false
allowDrag	EL native	Predicate allowing a tree node to be dragged.	Function	—
allowDrop	EL native	Predicate allowing a dragged node to be dropped at a target.	Function	—
lazy	EL native	Enable lazy loading.	Boolean	false
highlightCurrent	EL native	Highlight the current tree node.	Boolean	true
load	EL native	Lazy tree-node loader.	Function	—
accordion	EL native	Expand only one sibling tree node at a time.	Boolean	false
indent	EL native	Horizontal tree-level indentation in pixels.	Number	18
icon	EL native	Icon component or name.	String / Object / Function	—

Events（17）

Name	Source	Description	Parameters / type
check-change	EL native	Tree-node selection changes.	—
current-change	EL native	Current table row, tree node, or selected value changes.	—
node-click	EL native	Tree-node click.	—
node-contextmenu	EL native	Tree-node context menu.	—
node-collapse	EL native	Tree node collapses.	—
node-expand	EL native	Tree node expands.	—
check	EL native	Tree checkbox click with node data and checked collections.	—
node-drag-start	EL native	Tree-node dragging starts.	—
node-drag-end	EL native	Tree-node dragging ends.	—
node-drop	EL native	Tree-node drop completes.	—
node-drag-leave	EL native	Dragged node leaves a target.	—
node-drag-enter	EL native	Dragged node enters a target.	—
node-drag-over	EL native	Dragged node moves over a target.	—
update:modelValue	Fast addition	Updates v-model.	—
update:label	Fast addition	Updates the label model.	—
dataChange	Fast addition	Asynchronous data loading completes.	—
change	Fast addition	Value or selection changes.	—

Slots（3）

Name	Source	Description	Parameters / type
default({ node, data })	EL native	Default component content.	{ node: UnwrapRef<RootTreeType['root']>, data: Tree | TreeOptionProps }
label({ node, data })	Fast addition	Custom form, tree-node, or option label.	({ node, data })
empty	EL native	Custom empty-state content.	—

Expose（22）

Name	Source	Description	Parameters / type
filter	EL native	Filters tree nodes by keyword.	—
getNodeKey	EL native	Gets a tree node's unique key.	—
getNodePath	EL native	Gets the data path from root to a node.	—
updateKeyChildren	EL native	Updates tree/tree-table children by node key.	—
getCheckedNodes	EL native	Gets checked tree-node data.	—
setCheckedNodes	EL native	Sets checked nodes by data.	—
getCheckedKeys	EL native	Gets checked tree-node keys.	—
setCheckedKeys	EL native	Sets checked nodes by keys.	—
setChecked	EL native	Sets a tree node's checked state.	—
getHalfCheckedNodes	EL native	Gets partially checked tree-node data.	—
getHalfCheckedKeys	EL native	Gets partially checked tree-node keys.	—
getCurrentKey	EL native	Gets the current tree-node key.	—
getCurrentNode	EL native	Gets current tree-node data.	—
setCurrentKey	EL native	Sets the current tree node by key.	—
setCurrentNode	EL native	Sets the current tree node by data.	—
getNode	EL native	Gets a tree-node instance by data or key.	—
remove	EL native	Removes a tree node.	—
append	EL native	Appends a tree child.	—
insertBefore	EL native	Inserts before a tree node.	—
insertAfter	EL native	Inserts after a tree node.	—
loading	Fast addition	Fast business loading state.	—
refresh	Fast addition	Repeats the data request or refreshes business content.	—

FaTree instance methods

filter Filter

Filters tree nodes, hiding excluded nodes.

Signature

filter(value: FilterValue): void;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
componentRef.value?.filter(1);
</script>

Input

Input	Type	Required / default	Description
value	any	Required	Form value, selected value, or filter keyword to set.

Returns

Value	Type	Description
result	void	No return value.

getNodeKey Key

Gets a node's unique identifier.

Signature

getNodeKey(node: import("element-plus/es/components/tree/src/model/node.mjs").default): any;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const row = { id: 1, name: "Fast" };
const result = componentRef.value?.getNodeKey(row);
</script>

Input

Input	Type	Required / default	Description
node	Node	Required	Element Plus Tree node instance.

Returns

Value	Type	Description
result	any	Method result consistent with the current component state.

getNodePath Path

Gets path data for the specified node.

Signature

getNodePath(data: import("element-plus").TreeKey | TreeNodeData): TreeNodeData[];

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const row = { id: 1, name: "Fast" };
const result = componentRef.value?.getNodePath(row);
</script>

Input

Input	Type	Required / default	Description
data	TreeNodeData | TreeKey	Required	Business data to query, insert, remove, or replace.

Returns

Value	Type	Description
result	TreeNodeData[]	Method result consistent with the current component state.

updateKeyChildren Node

Sets new data for a node; requires node-key.

Signature

updateKeyChildren(key: import("element-plus").TreeKey, data: import("element-plus").TreeData): void;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const row = { id: 1, name: "Fast" };
componentRef.value?.updateKeyChildren(1, row);
</script>

Input

Input	Type	Required / default	Description
key	TreeKey	Required	Unique node, row, or column identifier.
data	TreeData	Required	Business data to query, insert, remove, or replace.

Returns

Value	Type	Description
result	void	No return value.

getCheckedNodes Selection

Returns checked nodes when show-checkbox is true.

Signature

getCheckedNodes(leafOnly?: boolean, includeHalfChecked?: boolean): TreeNodeData[];

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const result = componentRef.value?.getCheckedNodes(true, true);
</script>

Input

Input	Type	Required / default	Description
leafOnly	boolean | undefined	Optional	Whether to return only leaf nodes.
includeHalfChecked	boolean | undefined	Optional	Whether to include partially checked nodes.

Returns

Value	Type	Description
result	TreeNodeData[]	Method result consistent with the current component state.

setCheckedNodes Selection

Sets checked nodes; requires node-key.

Signature

setCheckedNodes(nodes: import("element-plus/es/components/tree/src/model/node.mjs").default[], leafOnly?: boolean): void;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
componentRef.value?.setCheckedNodes([row], true);
</script>

Input

Input	Type	Required / default	Description
nodes	Node[]	Required	Nodes to check.
leafOnly	boolean | undefined	Optional	Whether to return only leaf nodes.

Returns

Value	Type	Description
result	void	No return value.

getCheckedKeys Selection

Returns checked node keys when show-checkbox is true.

Signature

getCheckedKeys(leafOnly?: boolean): import("element-plus").TreeKey[];

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const result = componentRef.value?.getCheckedKeys(true);
</script>

Input

Input	Type	Required / default	Description
leafOnly	boolean | undefined	Optional	Whether to return only leaf nodes.

Returns

Value	Type	Description
result	TreeKey[]	Method result consistent with the current component state.

setCheckedKeys Selection

Sets checked nodes; requires node-key.

Signature

setCheckedKeys(keys: import("element-plus").TreeKey[], leafOnly?: boolean): void;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
componentRef.value?.setCheckedKeys(["name"], true);
</script>

Input

Input	Type	Required / default	Description
keys	TreeKey[]	Required	Node keys to check.
leafOnly	boolean | undefined	Optional	Whether to return only leaf nodes.

Returns

Value	Type	Description
result	void	No return value.

setChecked Selection

Sets a node's checked state; requires node-key.

Signature

setChecked(data: import("element-plus").TreeKey | TreeNodeData, checked: boolean, deep?: boolean): void;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const row = { id: 1, name: "Fast" };
componentRef.value?.setChecked(row, true, true);
</script>

Input

Input	Type	Required / default	Description
data	TreeNodeData | TreeKey	Required	Business data to query, insert, remove, or replace.
checked	boolean	Required	Whether the target node is checked.
deep	boolean | undefined	Optional	Whether descendants are included.

Returns

Value	Type	Description
result	void	No return value.

getHalfCheckedNodes Selection

Returns partially checked nodes when show-checkbox is true.

Signature

getHalfCheckedNodes(): TreeNodeData[];

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const result = componentRef.value?.getHalfCheckedNodes();
</script>

Input

This method has no input parameters.

Returns

Value	Type	Description
result	TreeNodeData[]	Method result consistent with the current component state.

getHalfCheckedKeys Selection

Returns partially checked node keys when show-checkbox is true.

Signature

getHalfCheckedKeys(): import("element-plus").TreeKey[];

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const result = componentRef.value?.getHalfCheckedKeys();
</script>

Input

This method has no input parameters.

Returns

Value	Type	Description
result	TreeKey[]	Method result consistent with the current component state.

getCurrentKey Current

Returns current-node data, or null when no node is current.

Signature

getCurrentKey(): import("element-plus").TreeKey | null;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const result = componentRef.value?.getCurrentKey();
</script>

Input

This method has no input parameters.

Returns

Value	Type	Description
result	TreeKey | null	Method result consistent with the current component state.

getCurrentNode Current

Returns current-node data, or null when no node is current.

Signature

getCurrentNode(): TreeNodeData | null;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const result = componentRef.value?.getCurrentNode();
</script>

Input

This method has no input parameters.

Returns

Value	Type	Description
result	TreeNodeData | null	Method result consistent with the current component state.

setCurrentKey Current

Sets the current node by key; requires node-key.

Signature

setCurrentKey(key?: import("element-plus").TreeKey | null, shouldAutoExpandParent?: boolean): void;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
componentRef.value?.setCurrentKey(1, true);
</script>

Input

Input	Type	Required / default	Description
key	TreeKey | null | undefined	Optional	Unique node, row, or column identifier.
shouldAutoExpandParent	boolean | undefined	Optional	Whether to automatically expand the target's parents.

Returns

Value	Type	Description
result	void	No return value.

setCurrentNode Current

Sets the current node; requires node-key.

Signature

setCurrentNode(node: import("element-plus/es/components/tree/src/model/node.mjs").default, shouldAutoExpandParent?: boolean): void;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const row = { id: 1, name: "Fast" };
componentRef.value?.setCurrentNode(row, true);
</script>

Input

Input	Type	Required / default	Description
node	Node	Required	Element Plus Tree node instance.
shouldAutoExpandParent	boolean | undefined	Optional	Whether to automatically expand the target's parents.

Returns

Value	Type	Description
result	void	No return value.

getNode Node

Gets a Tree node by data or key.

Signature

getNode(data: import("element-plus").TreeKey | TreeNodeData): import("element-plus/es/components/tree/src/model/node.mjs").default;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const row = { id: 1, name: "Fast" };
const result = componentRef.value?.getNode(row);
</script>

Input

Input	Type	Required / default	Description
data	TreeNodeData | TreeKey	Required	Business data to query, insert, remove, or replace.

Returns

Value	Type	Description
result	Node	Method result consistent with the current component state.

remove Remove

Removes a Tree node; requires node-key.

Signature

remove(data: TreeNodeData | import("element-plus/es/components/tree/src/model/node.mjs").default): void;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const row = { id: 1, name: "Fast" };
componentRef.value?.remove(row);
</script>

Input

Input	Type	Required / default	Description
data	TreeNodeData | Node	Required	Business data to query, insert, remove, or replace.

Returns

Value	Type	Description
result	void	No return value.

append Append

Appends a child to a Tree node.

Signature

append(data: TreeNodeData, parentNode: TreeNodeData | import("element-plus").TreeKey | import("element-plus/es/components/tree/src/model/node.mjs").default): void;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const row = { id: 1, name: "Fast" };
componentRef.value?.append(row, row);
</script>

Input

Input	Type	Required / default	Description
data	TreeNodeData	Required	Business data to query, insert, remove, or replace.
parentNode	TreeNodeData | TreeKey | Node	Required	Parent data, key, or node instance for insertion.

Returns

Value	Type	Description
result	void	No return value.

insertBefore Insert

Inserts a node before the specified Tree node.

Signature

insertBefore(data: TreeNodeData, refNode: import("element-plus").TreeKey | TreeNodeData | import("element-plus/es/components/tree/src/model/node.mjs").default): void;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const row = { id: 1, name: "Fast" };
componentRef.value?.insertBefore(row, row);
</script>

Input

Input	Type	Required / default	Description
data	TreeNodeData	Required	Business data to query, insert, remove, or replace.
refNode	TreeNodeData | TreeKey | Node	Required	Reference node data, key, or instance for insertion.

Returns

Value	Type	Description
result	void	No return value.

insertAfter Insert

Inserts a node after the specified Tree node.

Signature

insertAfter(data: TreeNodeData, refNode: import("element-plus").TreeKey | TreeNodeData | import("element-plus/es/components/tree/src/model/node.mjs").default): void;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const row = { id: 1, name: "Fast" };
componentRef.value?.insertAfter(row, row);
</script>

Input

Input	Type	Required / default	Description
data	TreeNodeData	Required	Business data to query, insert, remove, or replace.
refNode	TreeNodeData | TreeKey | Node	Required	Reference node data, key, or instance for insertion.

Returns

Value	Type	Description
result	void	No return value.

refresh Refresh

Refreshes.

Signature

refresh(): Promise<void>;

Example

<template>
	<FaTree ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaTree } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaTree>>();
const result = await componentRef.value?.refresh();
</script>

Input

This method has no input parameters.

Returns

Value	Type	Description
result	Promise<void>	Asynchronous result; callers handle Promise rejection.