FaTree 树

保留 ElTree 的选择、勾选、拖拽、懒加载和节点操作能力，并增加标题、全部节点、过滤、折叠导航、标签同步与异步请求。组件高度由调用方或所在容器决定，移动端不会附加最小高度；卡片边框颜色沿用 Element Plus 主题。

单选、标题、过滤与标签同步

查看代码

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>

复选框、拖拽、数量与自定义节点插槽

查看代码

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>

异步数据、Loading 与主动刷新

查看代码

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>

勾选、读取、追加和删除节点 Expose

查看代码

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

Props 属性 (40)

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

属性	来源	说明	类型	默认值
data	Fast 修改	组件数据。	Array	Fast[]EL[]
nodeKey	Fast 修改	树节点唯一键。	String	FastvalueEL—
props	Fast 修改	字段映射配置。	Object	Fast{"children":"children","label":"label","disabled":"disabled"}EL{"children":"children","label":"label","disabled":"disabled"}
filterNodeMethod	Fast 修改	树节点过滤函数，返回 false 时隐藏当前节点。	Function	Fast—EL—
disabled	Fast 新增	是否禁用组件或当前选项。	Boolean	false
collapseOnClickNode	Fast 新增	点击树节点后是否自动收起同级展开节点。	Boolean	false
modelValue	Fast 新增	v-model 绑定值。	String / Number / Boolean / Object	false
label	Fast 新增	显示文本或同步标签值。	String	—
width	Fast 新增	组件宽度。	String / Number	180
defaultSelection	Fast 新增	树组件初始化时默认选中的节点值。	String / Number	—
title	Fast 新增	组件标题文本。	String	—
hamburger	Fast 新增	是否显示树的折叠控制。	Boolean	false
hideAll	Fast 新增	是否隐藏树的全部节点。	Boolean	false
hideFilter	Fast 新增	是否隐藏树过滤输入框。	Boolean	false
allValue	Fast 新增	树组件“全部”节点对应的绑定值。	String / Number / Boolean / Object	false
requestApi	Fast 新增	异步数据请求函数。	Function	—
initParam	Fast 新增	请求初始化参数。	String / Number / Object	—
emptyText	EL 原生	空数据提示文字。	String	—
renderAfterExpand	EL 原生	是否在树节点首次展开后再渲染其子节点。	Boolean	true
checkStrictly	EL 原生	父子节点的选中状态是否互不关联。	Boolean	false
defaultExpandAll	EL 原生	是否默认展开全部节点。	Boolean	true
expandOnClickNode	EL 原生	点击树节点内容时是否展开或收起节点。	Boolean	true
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	—
lazy	EL 原生	是否启用懒加载。	Boolean	false
highlightCurrent	EL 原生	是否高亮显示树的当前节点。	Boolean	true
load	EL 原生	树节点懒加载函数。	Function	—
accordion	EL 原生	是否每次只展开一个同级树节点。	Boolean	false
indent	EL 原生	相邻树层级之间的水平缩进像素。	Number	18
icon	EL 原生	图标组件或图标名称。	String / Object / Function	—

Events 事件（17）

名称	来源	说明	参数 / 类型
check-change	EL 原生	树节点选中状态变化时触发。	—
current-change	EL 原生	表格当前行、树当前节点或选择值变化时触发。	—
node-click	EL 原生	点击树节点时触发。	—
node-contextmenu	EL 原生	右键点击树节点时触发。	—
node-collapse	EL 原生	树节点收起时触发。	—
node-expand	EL 原生	树节点展开时触发。	—
check	EL 原生	点击树节点复选框后触发，参数包含节点数据和选中集合。	—
node-drag-start	EL 原生	开始拖动树节点时触发。	—
node-drag-end	EL 原生	树节点拖动结束时触发。	—
node-drop	EL 原生	树节点完成放置时触发。	—
node-drag-leave	EL 原生	拖动节点离开目标节点时触发。	—
node-drag-enter	EL 原生	拖动节点进入目标节点时触发。	—
node-drag-over	EL 原生	拖动节点经过目标节点时触发。	—
update:modelValue	Fast 新增	更新 v-model。	—
update:label	Fast 新增	更新标签绑定值。	—
dataChange	Fast 新增	异步数据加载完成时触发。	—
change	Fast 新增	值或选择发生变化。	—

Slots 插槽（3）

名称	来源	说明	参数 / 类型
default({ node, data })	EL 原生	组件默认内容插槽。	{ node: UnwrapRef<RootTreeType['root']>, data: Tree | TreeOptionProps }
label({ node, data })	Fast 新增	自定义表单标签、树节点标签或选择项标签。	({ node, data })
empty	EL 原生	组件无数据时的自定义内容。	—

Expose 暴露（22）

名称	来源	说明	参数 / 类型
filter	EL 原生	按关键字执行树节点过滤。	—
getNodeKey	EL 原生	获取指定树节点的唯一 key。	—
getNodePath	EL 原生	获取从根节点到指定节点的数据路径。	—
updateKeyChildren	EL 原生	按节点 key 更新树或树形表格的子节点。	—
getCheckedNodes	EL 原生	获取树中已勾选节点的数据集合。	—
setCheckedNodes	EL 原生	按节点数据集合设置树勾选状态。	—
getCheckedKeys	EL 原生	获取树中已勾选节点的 key 集合。	—
setCheckedKeys	EL 原生	按 key 集合设置树勾选状态。	—
setChecked	EL 原生	设置指定树节点的勾选状态。	—
getHalfCheckedNodes	EL 原生	获取树中半选节点的数据集合。	—
getHalfCheckedKeys	EL 原生	获取树中半选节点的 key 集合。	—
getCurrentKey	EL 原生	获取树当前节点的 key。	—
getCurrentNode	EL 原生	获取树当前节点数据。	—
setCurrentKey	EL 原生	按 key 设置树当前节点。	—
setCurrentNode	EL 原生	按节点数据设置树当前节点。	—
getNode	EL 原生	按数据或 key 获取树节点实例。	—
remove	EL 原生	从树中移除指定节点。	—
append	EL 原生	向树中追加一个子节点。	—
insertBefore	EL 原生	在指定树节点之前插入节点。	—
insertAfter	EL 原生	在指定树节点之后插入节点。	—
loading	Fast 新增	Fast 业务加载状态。	—
refresh	Fast 新增	重新执行组件数据请求或刷新业务内容。	—

FaTree 实例方法

filter 过滤

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

签名

filter(value: FilterValue): void;

示例

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

输入

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

返回

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

getNodeKey 节点键

获取节点的唯一标识。

签名

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

示例

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

输入

输入值	输入值类型	必填/默认值	输入值说明
node	Node	是	Element Plus Tree 节点实例。

返回

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

getNodePath 路径

获取指定节点的路径数据。

签名

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

示例

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

输入

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

返回

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

updateKeyChildren 节点

为节点设置新数据，只有当设置 node-key 属性的时候才可用

签名

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

示例

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

输入

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

返回

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

getCheckedNodes 勾选

如果节点可以被选中，(show-checkbox 为 true), 本方法将返回当前选中节点的数组

签名

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

示例

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

输入

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

返回

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

setCheckedNodes 勾选

设置目前勾选的节点，使用此方法必须提前设置 node-key 属性

签名

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

示例

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

输入

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

返回

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

getCheckedKeys 勾选

若节点可用被选中 (show-checkbox 为 true), 它将返回当前选中节点 key 的数组

签名

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

示例

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

输入

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

返回

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

setCheckedKeys 勾选

设置目前选中的节点，使用此方法必须设置 node-key 属性

签名

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

示例

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

输入

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

返回

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

setChecked 勾选

设置节点是否被选中, 使用此方法必须设置 node-key 属性

签名

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

示例

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

输入

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

返回

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

getHalfCheckedNodes 勾选

如果节点可用被选中 (show-checkbox 为 true), 它将返回当前半选中的节点组成的数组

签名

getHalfCheckedNodes(): TreeNodeData[];

示例

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

输入

该方法没有输入参数。

返回

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

getHalfCheckedKeys 勾选

若节点可被选中(show-checkbox 为 true)，则返回目前半选中的节点的 key 所组成的数组

签名

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

示例

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

输入

该方法没有输入参数。

返回

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

getCurrentKey 当前项

返回当前被选中节点的数据 (如果没有则返回 null)

签名

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

示例

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

输入

该方法没有输入参数。

返回

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

getCurrentNode 当前项

返回当前被选中节点的数据 (如果没有则返回 null)

签名

getCurrentNode(): TreeNodeData | null;

示例

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

输入

该方法没有输入参数。

返回

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

setCurrentKey 当前项

通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性

签名

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

示例

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

输入

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

返回

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

setCurrentNode 当前项

设置节点为选中状态，使用此方法必须设置 node-key 属性

签名

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

示例

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

输入

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

返回

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

getNode 节点

根据 data 或者 key 拿到 Tree 组件中的 node

签名

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

示例

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

输入

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

返回

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

remove 移除

删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性

签名

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

示例

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

输入

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

返回

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

append 追加

为 Tree 中的一个节点追加一个子节点

签名

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

示例

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

输入

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

返回

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

insertBefore 前插

在 Tree 中给定节点前插入一个节点

签名

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

示例

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

输入

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

返回

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

insertAfter 后插

在 Tree 中给定节点后插入一个节点

签名

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

示例

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

输入

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

返回

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

refresh 刷新

刷新

签名

refresh(): Promise<void>;

示例

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

输入

该方法没有输入参数。

返回

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