WTreeSelect 组件

A2UI Protocol JSON Schema

树形选择组件，基于 WinDesignNext TreeSelect 封装，在下拉面板中以树形结构展示层级数据，适用于组织架构、菜单权限、分类目录等场景。

与 WCascader 的区别：WTreeSelect 下拉为树形控件，支持多选、任意级可选（checkStrictly）及可搜索；WCascader 为级联面板逐步展开。

基础用法

API

属性	类型	说明
component	string	固定为 WTreeSelect
modelValue	DataBindingValue	选中值，支持 path 双向绑定
data	array	静态树数据，与 dataSource 二选一
dataSource	string	从 dataModel 加载树数据的路径
props	object | DataBindingValue	树节点字段映射（label/value/children）
multiple	boolean	是否多选
checkStrictly	boolean	任意级可选（父子不关联）
filterable	boolean	是否可搜索
clearable	boolean	是否可清空
placeholder	string	占位文本
valueKey	string	对象节点的唯一键字段
action	Action	选择变化事件

path 支持说明

属性	path 支持	说明
modelValue	✅	选中值双向绑定
dataSource	✅（路径字符串）	树形数据数组路径
props	✅	树节点字段映射配置

modelValue 数据绑定

单选：

{ "modelValue": { "path": "/deptId" } }

多选：

{ "modelValue": { "path": "/menuIds" } }

dataSource 动态树数据

{
  "component": "WTreeSelect",
  "dataSource": "/menuTree",
  "modelValue": { "path": "/menuIds" },
  "multiple": true
}

props 字段映射

{
  "props": {
    "label": "name",
    "value": "id",
    "children": "subList"
  }
}

action 定义

{
  "action": {
    "event": {
      "name": "onDeptChange",
      "type": "change",
      "context": [{ "key": "deptId", "value": { "path": "/deptId" } }]
    }
  }
}

数据同步机制

1. Agent 定义组件并设置 modelValue.path
2. Agent 通过 updateDataModel 初始化树数据和选中值
3. 用户选择后，渲染器自动 setData 写回 dataModel
4. 配置了 action 时触发 A2UI 事件

使用场景

场景	推荐配置
组织架构选择	静态 data + modelValue.path
菜单/权限多选	multiple: true + checkStrictly: true
动态树数据	dataSource + filterable: true
自定义字段名	props 字段映射

注意事项

• 树数据通过 data 或 dataSource 传入，格式为 { value, label, children? }[]
• A2UI JSON 不支持 load、filterNodeMethod 等函数属性
• props 在 A2UI 协议中表示树节点字段映射，与 Vue 组件 props 概念相同