TreeFilter 树筛选

TreeFilter 树筛选 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { TreeFilter } from "@/components/pro/tree-filter";

const data = [{ id: "all", label: "全部" }, { id: "material", label: "材料" }, { id: "quote", label: "报价" }];
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <TreeFilter :data="data" title="分类" />
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { TreeFilter } from "@/components/pro/tree-filter";

Props

参数	说明	类型	默认值	必填
data	树形数据，如果传入该配置项且有数据，则不会执行 api 请求	Recordable[]	[]	否
requestApi	请求数据的 api	(data?: Recordable) => Promise<unknown>	undefined	否
defaultRequestParams	默认请求参数（请求一定会携带）	MaybeRef<Recordable>	{}	否
requestParams	请求参数	MaybeRef<Recordable>	{}	否
requestImmediate	是否立即执行请求	boolean	true	否
transformData	对请求成功的数据进行处理	(data: unknown, result?: unknown) => Recordable[]	undefined	否
title	treeFilter 标题	string	""	否
searchPlaceholder	搜索框占位文本	string	"输入关键字进行过滤"	否
id	选择的 id	string	"id"	否
label	显示的 label	string	"label"	否
filterFields	参与本地搜索的节点字段；缺省时仅匹配 label 字段 字段值仅支持字符串或数字，并会同时匹配当前节点及其祖先节点。	string[]	[]	否
children	子节点字段	string	"children"	否
multiple	是否为多选	boolean	false	否
defaultValue	默认选中的值	TreeKey | TreeKey[]	undefined	否
enableTotal	是否显示 全部 选项	boolean	true	否
defaultFirst	是否默认选中第一个选项	boolean	false	否
showMore	是否显示更多按钮	boolean	true	否
showNum	是否显示数量，仅显示一级节点数量	boolean	false	否
defaultExpandAll	是否默认展开所有节点	boolean	true	否
card	是否使用卡片样式	boolean	true	否
lazy	是否启用懒加载，初始只加载最外层节点，展开时再加载子节点	boolean	false	否
lazyRequestApi	懒加载子节点数据的方法（lazy 为 true 时必须提供） node 为当前节点数据，null 时表示加载根节点。 支持在节点数据中设置 isLeaf: true 标识叶子节点（不再触发加载）。	(node: Recordable | null) => Promise<Recordable[]>	undefined	否
width	组件宽度，默认 240px，传入空字符串则为自适应宽度	string	"240px"	否
maxHeight	组件最大高度，用于限制分类树占用的视口空间	string | number	undefined	否
resizable	是否允许拖拽右侧边缘调整宽度	boolean	true	否
minWidth	拖拽调整时的最小宽度（px）	number	160	否
maxWidth	拖拽调整时的最大宽度（px）	number	800	否
sticky	是否启用粘性布局，滚动到组件位置时固定在视口顶部	boolean	false	否
stickyTop	粘性布局时的 top 偏移量（px），用于避开固定头部等元素	number	0	否

Events

事件名	说明	回调参数
change	值变化时触发。	value: string | number | TreeKey[], data?: Recordable | Recordable[], path?: Recordable[] | Recordable[][],

Slots

插槽名	说明	参数
title	标题内容插槽。	-
actions	actions 内容插槽。	toggle-tree-nodes

Expose

名称	说明	类型
treeData	当前树数据。	-
treeAllData	完整树数据。	-
initTreeData	初始化树数据。	-
getNodePath	获取节点路径。	-

Module API

名称	说明	类型
TreeFilter	导出 TreeFilter 供业务侧复用。	useInstall(index)

Types

TreeFilterProps

导出 TreeFilterProps 供业务侧复用。

字段	说明	类型	默认值	必填
data	树形数据，如果传入该配置项且有数据，则不会执行 api 请求	Recordable[]	-	否
requestApi	请求数据的 api	(data?: Recordable) => Promise<unknown>	-	否
defaultRequestParams	默认请求参数（请求一定会携带）	MaybeRef<Recordable>	-	否
requestParams	请求参数	MaybeRef<Recordable>	-	否
requestImmediate	是否立即执行请求	boolean	true	否
transformData	对请求成功的数据进行处理	(data: unknown, result?: unknown) => Recordable[]	-	否
title	treeFilter 标题	string	-	否
searchPlaceholder	搜索框占位文本	string	'输入关键字进行过滤'	否
id	选择的 id	string	'id'	否
label	显示的 label	string	'label'	否
filterFields	参与本地搜索的节点字段；缺省时仅匹配 label 字段 字段值仅支持字符串或数字，并会同时匹配当前节点及其祖先节点。	string[]	-	否
children	子节点字段	string	-	否
multiple	是否为多选	boolean	false	否
defaultValue	默认选中的值	TreeKey | TreeKey[]	-	否
enableTotal	是否显示 全部 选项	boolean	true	否
defaultFirst	是否默认选中第一个选项	boolean	true	否
showMore	是否显示更多按钮	boolean	false	否
showNum	是否显示数量，仅显示一级节点数量	boolean	false	否
defaultExpandAll	是否默认展开所有节点	boolean	true	否
card	是否使用卡片样式	boolean	true	否
lazy	是否启用懒加载，初始只加载最外层节点，展开时再加载子节点	boolean	false	否
lazyRequestApi	懒加载子节点数据的方法（lazy 为 true 时必须提供） node 为当前节点数据，null 时表示加载根节点。 支持在节点数据中设置 isLeaf: true 标识叶子节点（不再触发加载）。	(node: Recordable | null) => Promise<Recordable[]>	-	否
width	组件宽度，默认 240px，传入空字符串则为自适应宽度	string	'240px'	否
maxHeight	组件最大高度，用于限制分类树占用的视口空间	string | number	-	否
resizable	是否允许拖拽右侧边缘调整宽度	boolean	true	否
minWidth	拖拽调整时的最小宽度（px）	number	160	否
maxWidth	拖拽调整时的最大宽度（px）	number	800	否
sticky	是否启用粘性布局，滚动到组件位置时固定在视口顶部	boolean	false	否
stickyTop	粘性布局时的 top 偏移量（px），用于避开固定头部等元素	number	0	否

FilterEmits

导出 FilterEmits 供业务侧复用。

字段	说明	类型	默认值	必填
change	配置 change。	[<br> value: string | number | TreeKey[],<br> data?: Recordable | Recordable[],<br> path?: Recordable[] | Recordable[][],<br> ]	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。