FSelectTree 异步树选择

基于 Element Plus ElTreeSelect 封装的异步树选择组件，支持统一请求配置、树字段映射、单选/多选以及原生属性、事件和插槽透传。

基础用法

通过 request 传入公共 BaseRequestConfig。组件挂载后默认请求完整树数据，通过 Element Plus 原生 props 属性配置节点字段。

loading

在 FForm 中使用

const schemas = [
  {
    field: 'departmentId',
    label: '部门',
    component: 'FSelectTree',
    componentProps: {
      request: { api: fetchDepartmentTree },
      nodeKey: 'id',
      props: { label: 'name', children: 'children' },
      clearable: true,
      checkStrictly: true,
    },
  },
]

现有 FTreeSelect 仍对应 Element Plus 原生树选择器；需要异步请求能力时使用 FSelectTree。

请求约定

组件调用 request.api 时默认传入空对象。可使用 beforeRequest 添加参数，使用 afterResponse 转换响应，并通过 responseMap.list 指定树数据路径。

const request: BaseRequestConfig = {
  api: fetchDepartmentTree,
  beforeRequest: () => ({ tenantId: 1 }),
  responseMap: {
    list: 'data.nodes',
  },
}

API

属性

参数	说明	类型	默认值
modelValue	选中值，支持单选或多选	any | any[]	—
request	公共请求配置	BaseRequestConfig	必填
props	Element Plus 树节点字段配置	TreeOptionProps	标准字段名

组件继承 Element Plus ElTreeSelect 的其他属性；data 和请求加载状态由组件内部控制。

底层组件同时支持树组件与选择器组件的属性、事件和插槽。节点值默认读取 value，使用 id 等其他字段时，应设置 node-key="id"，且节点键必须在整棵树中唯一；绑定值应为节点键，不支持直接绑定节点对象。

SelectTreeProps 是本组件库从 ElTreeSelect 实例属性派生的类型，并非 Element Plus 官方导出的类型。组件公开的 focus()、blur() 在新版本中通过底层 selectRef 调用。

事件

事件名	说明	参数
data-change	树数据请求成功	any[]
request-error	请求失败	error
其他原生事件	原样透传	与 Element Plus 一致

插槽

全部 ElTreeSelect 具名插槽均原样转发，插槽参数与 Element Plus 一致。

公开方法

方法	说明
fetchData()	请求树数据
reload()	重新请求树数据
focus()	聚焦选择器
blur()	取消聚焦