FaTreeSelect

Combines ElSelect and ElTree props, events and exposed methods with Fast data loading, label synchronization and default field mapping.

Tree Select

View code

Vue

<template>
	<div style="display: grid; max-width: 480px; gap: 12px">
		<FaTreeSelect
			:request-api="requestApi"
			v-model="singleValue"
			v-model:label="singleLabel"
			check-strictly
			filterable
			clearable
			placeholder="选择单个节点"
			@change="singleChangedData = $event"
		/>
		<span class="demo-value">
			单选值：{{ JSON.stringify(singleValue) }}；标签：{{ JSON.stringify(singleLabel) }}；change 数据：{{ JSON.stringify(singleChangedData) }}
		</span>
		<FaTreeSelect
			v-model="multipleValue"
			v-model:label="multipleLabel"
			:data="data"
			multiple
			show-checkbox
			check-strictly
			filterable
			clearable
			placeholder="选择多个节点"
			@change="multipleChangedData = $event"
		/>
		<span class="demo-value">
			多选值：{{ JSON.stringify(multipleValue) }}；标签：{{ JSON.stringify(multipleLabel) }}；change 数据：{{
				JSON.stringify(multipleChangedData)
			}}
		</span>
	</div>
</template>

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

const singleValue = ref<string>();
const singleLabel = ref<string | null>(null);
const multipleValue = ref<string[]>([]);
const multipleLabel = ref<string[] | null>([]);
const singleChangedData = ref<unknown>();
const multipleChangedData = ref<unknown>();
const data = [
	{
		value: "frontend",
		label: "前端组件",
		children: [
			{ value: "form", label: "表单" },
			{ value: "table", label: "表格" },
			{ value: "upload", label: "上传", disabled: true },
		],
	},
	{
		value: "backend",
		label: "后端 SDK",
		children: [
			{ value: "fast-net", label: "Fast.NET" },
			{ value: "fast-admin", label: "Fast.Admin" },
		],
	},
];
const requestApi = (): Promise<typeof data> => Promise.resolve(data);
</script>

FaTreeSelect Complete API

Props (86)

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
modelValue	Fast override	v-model value.	String / Number / Boolean / Object / Array	FastfalseELfalse
loading	Fast override	Loading state.	Boolean	FastfalseELfalse
props	Fast override	Field mappings.	Object	Fast{"label":"label","hide":"hide","disabled":"disabled","children":"children"}EL{"children":"children","label":"label","disabled":"disabled"}
data	Fast override	Component data.	Array	Fast[]EL[]
nodeKey	Fast override	Unique tree-node key.	String	FastvalueEL—
lazy	Fast override	Enable lazy loading.	Boolean	FasttrueELfalse
filterNodeMethod	Fast override	Tree filter; false hides the node.	Function	Fast—EL—
collapseOnClickNode	Fast addition	Collapse expanded siblings when a tree node is clicked.	Boolean	false
label	Fast addition	Display text or synchronized label.	String / Array	—
width	Fast addition	Component width.	String / Number	100%
moreDetail	Fast addition	Enable wider option-detail layout.	Boolean	false
defaultSelected	Fast addition	Initialize selection from the current value.	Boolean	false
requestApi	Fast addition	Asynchronous data-request function.	Function	—
initParam	Fast addition	Initial request parameters.	String / Number / Object	—
name	EL native	Icon name, CSS class, or external SVG URL.	String	—
id	EL native	Native ID of the root input.	String	—
autocomplete	EL native	Native input autocomplete attribute.	String	off
automaticDropdown	EL native	Open dropdown automatically on focus.	Boolean	false
size	EL native	Component size.	String	—
effect	EL native	Tooltip theme for the dropdown.	String	light
disabled	EL native	Disable the component or current option.	Boolean	false
clearable	EL native	Allow clearing.	Boolean	false
filterable	EL native	Allow filtering.	Boolean	false
allowCreate	EL native	Allow creating new options.	Boolean	false
popperClass	EL native	Custom dropdown-overlay class.	String / Array / Object / Boolean	""
popperStyle	EL native	Custom dropdown-root styles.	String / Array / Object / Boolean	false
popperOptions	EL native	Popper positioning options.	Object	{}
remote	EL native	Enable remote search.	Boolean	false
debounce	EL native	Remote-search debounce in milliseconds.	Number	300
loadingText	EL native	Text shown while remote data loads.	String	加载中...
noMatchText	EL native	Text when filtering finds no matches.	String	暂无匹配的数据
noDataText	EL native	Text when no options/nodes exist.	String	暂无数据
remoteMethod	EL native	Loader called when remote-search keywords change.	Function	—
filterMethod	EL native	Local option-filtering function.	Function	—
multiple	EL native	Allow multiple selection.	Boolean	false
multipleLimit	EL native	Maximum selections; 0 means unlimited.	Number	0
placeholder	EL native	Placeholder.	String	—
defaultFirstOption	EL native	Select the first matching option on Enter.	Boolean	false
reserveKeyword	EL native	Keep the keyword after remote multiple selection.	Boolean	true
valueKey	EL native	Unique key field for object-valued options.	String	value
collapseTags	EL native	Collapse tags in multiple selection.	Boolean	true
collapseTagsTooltip	EL native	Show collapsed tags in a tooltip.	Boolean	true
tagTooltip	EL native	Collapsed-tag tooltip options.	Object	{}
maxCollapseTags	EL native	Maximum visible tags before collapsing.	Number	1
teleported	EL native	Teleport the dropdown to appendTo.	Boolean	true
persistent	EL native	Keep the hidden dropdown in the DOM.	Boolean	true
clearIcon	EL native	Clear-button icon.	String / Object / Function	{"name":"CircleClose","__name":"circle-close"}
fitInputWidth	EL native	Ensure dropdown width is at least the input width.	Boolean	false
suffixIcon	EL native	Selector suffix icon.	String / Object / Function	{"name":"ArrowDown","__name":"arrow-down"}
tagType	EL native	Element Plus type for selection tags.	String	info
tagEffect	EL native	Element Plus effect for selection tags.	String	light
validateEvent	EL native	Trigger form validation on model changes.	Boolean	true
remoteShowSuffix	EL native	Show the selector suffix icon in remote mode.	Boolean	false
showArrow	EL native	Show the dropdown arrow pointing to its trigger.	Boolean	true
offset	EL native	Offset or overlay offset.	Number	12
placement	EL native	Preferred dropdown placement relative to its trigger.	String	bottom-start
fallbackPlacements	EL native	Fallback overlay placements tried in order.	Array	["bottom-start","top-start","right","left"]
tabindex	EL native	Native input tabindex.	String / Number	0
appendTo	EL native	Overlay mount target.	String / Object	—
options	EL native	Virtual-selector options.	Array	—
emptyValues	EL native	Model values considered empty.	Array	—
valueOnClear	EL native	Value or factory used when clearing the model.	String / Number / Boolean / Function	false
ariaLabel	EL native	Accessible component name.	String	—
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	false
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	—
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	—
cacheData	EL native	Cached lazy-tree nodes used to resolve selected labels.	Array	[]

Events（24）

Name	Source	Description	Parameters / type
update:modelValue	Fast addition	Updates v-model.	—
change	Fast addition	Value or selection changes.	—
popup-scroll	Fast addition	Selector dropdown scrolls.	—
end-reached	Fast addition	Selector reaches a dropdown scroll boundary.	—
remove-tag	Fast addition	A multiple-selection tag is removed; receives the removed value.	—
visible-change	Fast addition	Selector dropdown visibility changes.	—
focus	Fast addition	Component gains focus.	—
blur	Fast addition	Component loses focus.	—
clear	Fast addition	Clear-button click after clearing completes.	—
check-change	Fast addition	Tree-node selection changes.	—
current-change	Fast addition	Current table row, tree node, or selected value changes.	—
node-click	Fast addition	Tree-node click.	—
node-contextmenu	Fast addition	Tree-node context menu.	—
node-collapse	Fast addition	Tree node collapses.	—
node-expand	Fast addition	Tree node expands.	—
check	Fast addition	Tree checkbox click with node data and checked collections.	—
node-drag-start	Fast addition	Tree-node dragging starts.	—
node-drag-end	Fast addition	Tree-node dragging ends.	—
node-drop	Fast addition	Tree-node drop completes.	—
node-drag-leave	Fast addition	Dragged node leaves a target.	—
node-drag-enter	Fast addition	Dragged node enters a target.	—
node-drag-over	Fast addition	Dragged node moves over a target.	—
update:label	Fast addition	Updates the label model.	—
dataChange	Fast addition	Asynchronous data loading completes.	—

Slots（8）

Name	Source	Description	Parameters / type
default	EL native	Default component content.	—
header	EL native	Custom header or table-header business content.	—
footer	EL native	Custom footer actions; overlays provide loading and close.	—
prefix	EL native	Custom selector input prefix.	—
empty	EL native	Custom empty-state content.	—
tag	EL native	Custom multiple-selection tags.	—
loading	EL native	Custom loading content.	—
label	EL native	Custom form, tree-node, or option label.	—

Expose（27）

Name	Source	Description	Parameters / type
focus	EL native	Focuses the input/selector.	—
blur	EL native	Blurs the input/selector.	—
selectedLabel	Fast addition	Current selector display label.	—
filter	EL native	Filters tree nodes by keyword.	—
updateKeyChildren	Fast addition	Updates tree/tree-table children by node key.	—
getCheckedNodes	Fast addition	Gets checked tree-node data.	—
setCheckedNodes	Fast addition	Sets checked nodes by data.	—
getCheckedKeys	Fast addition	Gets checked tree-node keys.	—
setCheckedKeys	Fast addition	Sets checked nodes by keys.	—
setChecked	Fast addition	Sets a tree node's checked state.	—
getHalfCheckedNodes	Fast addition	Gets partially checked tree-node data.	—
getHalfCheckedKeys	Fast addition	Gets partially checked tree-node keys.	—
getCurrentKey	Fast addition	Gets the current tree-node key.	—
getCurrentNode	Fast addition	Gets current tree-node data.	—
setCurrentKey	Fast addition	Sets the current tree node by key.	—
setCurrentNode	Fast addition	Sets the current tree node by data.	—
getNode	Fast addition	Gets a tree-node instance by data or key.	—
remove	Fast addition	Removes a tree node.	—
append	Fast addition	Appends a tree child.	—
insertBefore	Fast addition	Inserts before a tree node.	—
insertAfter	Fast addition	Inserts after a tree node.	—
treeRef	EL native	FaTreeSelect internal ElTree ref.	—
selectRef	EL native	FaTreeSelect internal ElSelect ref.	—
loading	Fast addition	Fast business loading state.	—
refresh	Fast addition	Repeats the data request or refreshes business content.	—
setSelection	Fast addition	Sets the selector value and label.	—
clearSelection	Fast addition	Clears the current selection.	—

FaTreeSelect instance methods

focus Focus

Focuses the selector input.

Signature

focus(): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
componentRef.value?.focus();
</script>

Input

This method has no input parameters.

Returns

Value	Type	Description
result	void	No return value.

blur Blur

Blurs the selector input and hides the dropdown.

Signature

blur(): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
componentRef.value?.blur();
</script>

Input

This method has no input parameters.

Returns

Value	Type	Description
result	void	No return value.

filter Filter

Filters tree nodes, hiding excluded nodes.

Signature

filter(value: FilterValue): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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.

updateKeyChildren Node

Sets node data; requires node-key.

Signature

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

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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

Gets checked nodes.

Signature

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

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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.

Signature

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

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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

Gets checked node keys.

Signature

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

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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 node keys.

Signature

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

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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 node checked state.

Signature

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

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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

Gets partially checked nodes.

Signature

getHalfCheckedNodes(): TreeNodeData[];

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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

Gets partially checked node keys.

Signature

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

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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

Gets the current node key.

Signature

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

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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

Gets the current node.

Signature

getCurrentNode(): TreeNodeData | null;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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 key.

Signature

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

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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.

Signature

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

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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 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>
	<FaTreeSelect ref="componentRef" />
</template>

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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 node.

Signature

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

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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 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>
	<FaTreeSelect ref="componentRef" />
</template>

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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 before a specified 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>
	<FaTreeSelect ref="componentRef" />
</template>

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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 after a specified 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>
	<FaTreeSelect ref="componentRef" />
</template>

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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>
	<FaTreeSelect ref="componentRef" />
</template>

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
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.

setSelection Selection

Sets the selection.

Signature

setSelection(value: Exclude<ElSelectorModelValue, null | undefined>): void;

Example

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

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

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

Input

Input	Type	Required / default	Description
value	ElSelectorValue | ElSelectorValue[]	Required	Form value, selected value, or filter keyword to set.

Returns

Value	Type	Description
result	void	No return value.

clearSelection Selection

Clears the selection.

Signature

clearSelection(): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTreeSelect>>();
componentRef.value?.clearSelection();
</script>

Input

This method has no input parameters.

Returns

Value	Type	Description
result	void	No return value.