FaTreeSelect 树形选择器

组合 ElSelect 与 ElTree 的完整属性、事件和实例能力，并加入 Fast 数据请求、标签同步和默认字段映射。

树形单选、多选、筛选与禁用节点

查看代码

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 完整 API

Props 属性 (86)

Fast 与 Element Plus 2.14.6 的属性已合并展示；Fast 修改项优先排列，未透传的原生属性保留用于兼容性核对。

属性	来源	说明	类型	默认值
modelValue	Fast 修改	v-model 绑定值。	String / Number / Boolean / Object / Array	FastfalseELfalse
loading	Fast 修改	加载状态。	Boolean	FastfalseELfalse
props	Fast 修改	字段映射配置。	Object	Fast{"label":"label","hide":"hide","disabled":"disabled","children":"children"}EL{"children":"children","label":"label","disabled":"disabled"}
data	Fast 修改	组件数据。	Array	Fast[]EL[]
nodeKey	Fast 修改	树节点唯一键。	String	FastvalueEL—
lazy	Fast 修改	是否启用懒加载。	Boolean	FasttrueELfalse
filterNodeMethod	Fast 修改	树节点过滤函数，返回 false 时隐藏当前节点。	Function	Fast—EL—
collapseOnClickNode	Fast 新增	点击树节点后是否自动收起同级展开节点。	Boolean	false
label	Fast 新增	显示文本或同步标签值。	String / Array	—
width	Fast 新增	组件宽度。	String / Number	100%
moreDetail	Fast 新增	是否启用更宽的选项详情布局。	Boolean	false
defaultSelected	Fast 新增	是否根据当前值初始化选中项。	Boolean	false
requestApi	Fast 新增	异步数据请求函数。	Function	—
initParam	Fast 新增	请求初始化参数。	String / Number / Object	—
name	EL 原生	图标名称、CSS 类名或外部 SVG 地址。	String	—
id	EL 原生	组件根输入元素的原生 id。	String	—
autocomplete	EL 原生	输入框原生 autocomplete 属性。	String	off
automaticDropdown	EL 原生	获得焦点后是否自动打开下拉菜单。	Boolean	false
size	EL 原生	组件尺寸。	String	—
effect	EL 原生	下拉浮层使用的 Tooltip 主题。	String	light
disabled	EL 原生	是否禁用组件或当前选项。	Boolean	false
clearable	EL 原生	是否允许清空。	Boolean	false
filterable	EL 原生	是否允许筛选。	Boolean	false
allowCreate	EL 原生	是否允许创建新选项。	Boolean	false
popperClass	EL 原生	下拉浮层的自定义类名。	String / Array / Object / Boolean	""
popperStyle	EL 原生	下拉浮层根元素的自定义样式。	String / Array / Object / Boolean	false
popperOptions	EL 原生	传递给 Popper 的定位配置。	Object	{}
remote	EL 原生	是否启用远程搜索模式。	Boolean	false
debounce	EL 原生	远程搜索输入的防抖时间，单位毫秒。	Number	300
loadingText	EL 原生	远程数据加载期间显示的文字。	String	加载中...
noMatchText	EL 原生	筛选没有匹配结果时显示的文字。	String	暂无匹配的数据
noDataText	EL 原生	没有可用选项或树节点时显示的文字。	String	暂无数据
remoteMethod	EL 原生	远程搜索关键字变化时调用的数据加载函数。	Function	—
filterMethod	EL 原生	本地筛选选项时调用的过滤函数。	Function	—
multiple	EL 原生	是否允许多选。	Boolean	false
multipleLimit	EL 原生	多选模式允许选择的最大项目数，0 表示不限制。	Number	0
placeholder	EL 原生	占位提示。	String	—
defaultFirstOption	EL 原生	按 Enter 时是否默认选择首个匹配选项。	Boolean	false
reserveKeyword	EL 原生	多选远程搜索选中项目后是否保留关键字。	Boolean	true
valueKey	EL 原生	选项值为对象时用于唯一标识选项的字段名。	String	value
collapseTags	EL 原生	多选时是否折叠标签。	Boolean	true
collapseTagsTooltip	EL 原生	是否以 Tooltip 展示折叠标签。	Boolean	true
tagTooltip	EL 原生	折叠标签 Tooltip 的自定义配置。	Object	{}
maxCollapseTags	EL 原生	折叠多选标签前最多保留的标签数量。	Number	1
teleported	EL 原生	是否将下拉浮层传送到 appendTo 指定的容器。	Boolean	true
persistent	EL 原生	下拉浮层隐藏后是否保留在 DOM 中。	Boolean	true
clearIcon	EL 原生	清空按钮使用的图标组件。	String / Object / Function	{"name":"CircleClose","__name":"circle-close"}
fitInputWidth	EL 原生	下拉浮层宽度是否至少与输入框一致。	Boolean	false
suffixIcon	EL 原生	选择器右侧显示的后缀图标组件。	String / Object / Function	{"name":"ArrowDown","__name":"arrow-down"}
tagType	EL 原生	多选标签使用的 Element Plus 类型。	String	info
tagEffect	EL 原生	多选标签使用的 Element Plus 主题效果。	String	light
validateEvent	EL 原生	模型值变化时是否触发表单校验。	Boolean	true
remoteShowSuffix	EL 原生	远程搜索模式下是否显示选择器后缀图标。	Boolean	false
showArrow	EL 原生	下拉浮层是否显示指向触发元素的箭头。	Boolean	true
offset	EL 原生	偏移量或浮层偏移。	Number	12
placement	EL 原生	下拉浮层相对触发元素的首选位置。	String	bottom-start
fallbackPlacements	EL 原生	首选位置空间不足时依次尝试的浮层位置。	Array	["bottom-start","top-start","right","left"]
tabindex	EL 原生	组件输入元素的原生 tabindex。	String / Number	0
appendTo	EL 原生	浮层挂载目标。	String / Object	—
options	EL 原生	虚拟选择器的选项数据。	Array	—
emptyValues	EL 原生	视为空值的模型值集合。	Array	—
valueOnClear	EL 原生	清空时写入模型的值或值生成函数。	String / Number / Boolean / Function	false
ariaLabel	EL 原生	组件面向辅助技术的可访问名称。	String	—
emptyText	EL 原生	空数据提示文字。	String	—
renderAfterExpand	EL 原生	是否在树节点首次展开后再渲染其子节点。	Boolean	true
checkStrictly	EL 原生	父子节点的选中状态是否互不关联。	Boolean	false
defaultExpandAll	EL 原生	是否默认展开全部节点。	Boolean	true
expandOnClickNode	EL 原生	点击树节点内容时是否展开或收起节点。	Boolean	false
checkOnClickNode	EL 原生	点击树节点时是否切换勾选状态。	Boolean	true
checkOnClickLeaf	EL 原生	点击树叶子节点时是否切换勾选状态。	Boolean	true
checkDescendants	EL 原生	懒加载节点时是否选中已选父节点的后代节点。	Boolean	false
autoExpandParent	EL 原生	展开节点时是否自动展开其父节点。	Boolean	true
defaultCheckedKeys	EL 原生	初始化时默认勾选的节点 key 集合。	Array	—
defaultExpandedKeys	EL 原生	初始化时默认展开的节点 key 集合。	Array	—
currentNodeKey	EL 原生	初始化时设为当前节点的 key。	String / Number	—
renderContent	EL 原生	自定义树节点内容的渲染函数。	Function	—
showCheckbox	EL 原生	是否在树节点前显示复选框。	Boolean	false
draggable	EL 原生	是否允许拖动。	Boolean	false
allowDrag	EL 原生	判断指定树节点是否允许被拖动。	Function	—
allowDrop	EL 原生	判断拖动节点是否允许放置到目标位置。	Function	—
highlightCurrent	EL 原生	是否高亮显示树的当前节点。	Boolean	true
load	EL 原生	树节点懒加载函数。	Function	—
accordion	EL 原生	是否每次只展开一个同级树节点。	Boolean	false
indent	EL 原生	相邻树层级之间的水平缩进像素。	Number	18
icon	EL 原生	图标组件或图标名称。	String / Object / Function	—
cacheData	EL 原生	懒加载场景中用于补全选中标签的缓存节点数据。	Array	[]

Events 事件（24）

名称	来源	说明	参数 / 类型
update:modelValue	Fast 新增	更新 v-model。	—
change	Fast 新增	值或选择发生变化。	—
popup-scroll	Fast 新增	选择器下拉列表滚动时触发。	—
end-reached	Fast 新增	选择器滚动到下拉列表边界时触发。	—
remove-tag	Fast 新增	多选模式移除标签时触发，参数为被移除的值。	—
visible-change	Fast 新增	选择器下拉浮层显示状态变化时触发。	—
focus	Fast 新增	组件获得焦点时触发。	—
blur	Fast 新增	组件失去焦点时触发。	—
clear	Fast 新增	点击清空按钮并完成清空时触发。	—
check-change	Fast 新增	树节点选中状态变化时触发。	—
current-change	Fast 新增	表格当前行、树当前节点或选择值变化时触发。	—
node-click	Fast 新增	点击树节点时触发。	—
node-contextmenu	Fast 新增	右键点击树节点时触发。	—
node-collapse	Fast 新增	树节点收起时触发。	—
node-expand	Fast 新增	树节点展开时触发。	—
check	Fast 新增	点击树节点复选框后触发，参数包含节点数据和选中集合。	—
node-drag-start	Fast 新增	开始拖动树节点时触发。	—
node-drag-end	Fast 新增	树节点拖动结束时触发。	—
node-drop	Fast 新增	树节点完成放置时触发。	—
node-drag-leave	Fast 新增	拖动节点离开目标节点时触发。	—
node-drag-enter	Fast 新增	拖动节点进入目标节点时触发。	—
node-drag-over	Fast 新增	拖动节点经过目标节点时触发。	—
update:label	Fast 新增	更新标签绑定值。	—
dataChange	Fast 新增	异步数据加载完成时触发。	—

Slots 插槽（8）

名称	来源	说明	参数 / 类型
default	EL 原生	组件默认内容插槽。	—
header	EL 原生	自定义头部内容或表格头部业务区域。	—
footer	EL 原生	自定义底部操作区域；弹层中可获得 loading 和 close。	—
prefix	EL 原生	自定义选择器输入框前缀内容。	—
empty	EL 原生	组件无数据时的自定义内容。	—
tag	EL 原生	自定义多选标签内容。	—
loading	EL 原生	自定义加载状态内容。	—
label	EL 原生	自定义表单标签、树节点标签或选择项标签。	—

Expose 暴露（27）

名称	来源	说明	参数 / 类型
focus	EL 原生	让输入或选择组件获得焦点。	—
blur	EL 原生	让输入或选择组件失去焦点。	—
selectedLabel	Fast 新增	选择器当前显示的标签文本。	—
filter	EL 原生	按关键字执行树节点过滤。	—
updateKeyChildren	Fast 新增	按节点 key 更新树或树形表格的子节点。	—
getCheckedNodes	Fast 新增	获取树中已勾选节点的数据集合。	—
setCheckedNodes	Fast 新增	按节点数据集合设置树勾选状态。	—
getCheckedKeys	Fast 新增	获取树中已勾选节点的 key 集合。	—
setCheckedKeys	Fast 新增	按 key 集合设置树勾选状态。	—
setChecked	Fast 新增	设置指定树节点的勾选状态。	—
getHalfCheckedNodes	Fast 新增	获取树中半选节点的数据集合。	—
getHalfCheckedKeys	Fast 新增	获取树中半选节点的 key 集合。	—
getCurrentKey	Fast 新增	获取树当前节点的 key。	—
getCurrentNode	Fast 新增	获取树当前节点数据。	—
setCurrentKey	Fast 新增	按 key 设置树当前节点。	—
setCurrentNode	Fast 新增	按节点数据设置树当前节点。	—
getNode	Fast 新增	按数据或 key 获取树节点实例。	—
remove	Fast 新增	从树中移除指定节点。	—
append	Fast 新增	向树中追加一个子节点。	—
insertBefore	Fast 新增	在指定树节点之前插入节点。	—
insertAfter	Fast 新增	在指定树节点之后插入节点。	—
treeRef	EL 原生	FaTreeSelect 内部 ElTree 引用。	—
selectRef	EL 原生	FaTreeSelect 内部 ElSelect 引用。	—
loading	Fast 新增	Fast 业务加载状态。	—
refresh	Fast 新增	重新执行组件数据请求或刷新业务内容。	—
setSelection	Fast 新增	设置选择器的选中值及标签。	—
clearSelection	Fast 新增	清除当前选择集合。	—

FaTreeSelect 实例方法

focus 聚焦

使选择器的输入框获取焦点。

签名

focus(): void;

示例

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

输入

该方法没有输入参数。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

blur 失焦

使选择器的输入框失去焦点，并隐藏下拉框。

签名

blur(): void;

示例

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

输入

该方法没有输入参数。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

filter 过滤

过滤所有树节点，过滤后的节点将被隐藏。

签名

filter(value: FilterValue): void;

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
value	any	是	要设置的表单值、选择值或过滤关键字。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

updateKeyChildren 节点

为节点设置新数据，只有设置 node-key 时可用。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
key	TreeKey	是	节点、行或列的唯一标识。
data	TreeData	是	要查询、插入、删除或替换的业务数据。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

getCheckedNodes 勾选

获取当前选中的节点。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
leafOnly	boolean | undefined	否	是否只返回叶子节点。
includeHalfChecked	boolean | undefined	否	返回结果是否包含半选节点。

返回

返回值	返回值类型	返回值说明
result	TreeNodeData[]	方法调用结果，具体数据与当前组件状态一致。

setCheckedNodes 勾选

设置当前选中的节点。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
nodes	Node[]	是	需要勾选的节点集合。
leafOnly	boolean | undefined	否	是否只返回叶子节点。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

getCheckedKeys 勾选

获取当前选中的节点 Key。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
leafOnly	boolean | undefined	否	是否只返回叶子节点。

返回

返回值	返回值类型	返回值说明
result	TreeKey[]	方法调用结果，具体数据与当前组件状态一致。

setCheckedKeys 勾选

设置当前选中的节点 Key。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
keys	TreeKey[]	是	需要勾选的节点 key 集合。
leafOnly	boolean | undefined	否	是否只返回叶子节点。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

setChecked 勾选

设置节点选中状态。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
data	TreeNodeData | TreeKey	是	要查询、插入、删除或替换的业务数据。
checked	boolean	是	是否勾选目标节点。
deep	boolean | undefined	否	是否同时包含后代节点。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

getHalfCheckedNodes 勾选

获取当前半选中的节点。

签名

getHalfCheckedNodes(): TreeNodeData[];

示例

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

输入

该方法没有输入参数。

返回

返回值	返回值类型	返回值说明
result	TreeNodeData[]	方法调用结果，具体数据与当前组件状态一致。

getHalfCheckedKeys 勾选

获取当前半选中的节点 Key。

签名

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

示例

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

输入

该方法没有输入参数。

返回

返回值	返回值类型	返回值说明
result	TreeKey[]	方法调用结果，具体数据与当前组件状态一致。

getCurrentKey 当前项

获取当前节点 Key。

签名

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

示例

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

输入

该方法没有输入参数。

返回

返回值	返回值类型	返回值说明
result	TreeKey | null	方法调用结果，具体数据与当前组件状态一致。

getCurrentNode 当前项

获取当前节点。

签名

getCurrentNode(): TreeNodeData | null;

示例

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

输入

该方法没有输入参数。

返回

返回值	返回值类型	返回值说明
result	TreeNodeData | null	方法调用结果，具体数据与当前组件状态一致。

setCurrentKey 当前项

设置当前节点 Key。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
key	TreeKey | null | undefined	否	节点、行或列的唯一标识。
shouldAutoExpandParent	boolean | undefined	否	是否自动展开目标节点的父级。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

setCurrentNode 当前项

设置当前节点。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
node	Node	是	Element Plus Tree 节点实例。
shouldAutoExpandParent	boolean | undefined	否	是否自动展开目标节点的父级。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

getNode 节点

根据数据或 Key 获取节点。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
data	TreeNodeData | TreeKey	是	要查询、插入、删除或替换的业务数据。

返回

返回值	返回值类型	返回值说明
result	Node	方法调用结果，具体数据与当前组件状态一致。

remove 移除

删除节点。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
data	TreeNodeData | Node	是	要查询、插入、删除或替换的业务数据。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

append 追加

追加子节点。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
data	TreeNodeData	是	要查询、插入、删除或替换的业务数据。
parentNode	TreeNodeData | TreeKey | Node	是	追加节点时使用的父节点数据、key 或节点实例。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

insertBefore 前插

在指定节点前插入节点。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
data	TreeNodeData	是	要查询、插入、删除或替换的业务数据。
refNode	TreeNodeData | TreeKey | Node	是	插入位置所参照的节点数据、key 或节点实例。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

insertAfter 后插

在指定节点后插入节点。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
data	TreeNodeData	是	要查询、插入、删除或替换的业务数据。
refNode	TreeNodeData | TreeKey | Node	是	插入位置所参照的节点数据、key 或节点实例。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

refresh 刷新

刷新

签名

refresh(): Promise<void>;

示例

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

输入

该方法没有输入参数。

返回

返回值	返回值类型	返回值说明
result	Promise<void>	异步完成后的结果；Promise 拒绝时由调用方处理。

setSelection 勾选

设置选择

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
value	ElSelectorValue | ElSelectorValue[]	是	要设置的表单值、选择值或过滤关键字。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

clearSelection 勾选

清除选择

签名

clearSelection(): void;

示例

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

输入

该方法没有输入参数。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。