WTreeV2 组件
虚拟化树形控件,基于 WinDesignNext Tree V2 封装,通过虚拟滚动展示大规模层级数据,适用于节点数量较多的组织架构、菜单、分类等场景。
与 WTree 的区别:WTreeV2 内置虚拟列表,需设置
height;适合数千节点以上场景。WTree 适合中小规模且需要更多传统树 API 的场景。
基础用法
API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
component | string | WTreeV2 | 组件类型(必填) |
data / dataSource | array / string | — | 树数据 |
props | object | DataBindingValue | — | 节点字段映射 |
height | number | DataBindingValue | 200 | 虚拟列表高度(必填) |
itemSize | number | DataBindingValue | 32 | 节点行高 |
currentNodeKey | DataBindingValue | — | 当前选中节点 key |
checkedKeys | DataBindingValue | — | 勾选节点 key 数组 |
expandedKeys | DataBindingValue | — | 默认展开节点 key 数组 |
showCheckbox | boolean | false | 显示复选框 |
checkStrictly | boolean | false | 父子勾选不关联 |
highlightCurrent | boolean | false | 高亮当前节点 |
action | Action | — | 节点交互事件 |
path 支持说明
| 属性 | path 支持 | 说明 |
|---|---|---|
dataSource | ✅(路径字符串) | 树数据数组路径 |
props | ✅ | 节点字段映射 |
currentNodeKey | ✅ | 当前节点 key,选中后写回 |
checkedKeys | ✅ | 勾选 key 数组,勾选后写回 |
expandedKeys | ✅ | 初始展开 key 数组 |
height / itemSize | ✅ | 虚拟列表尺寸 |
emptyText | ✅ | 空数据提示 |
树数据格式
json
[
{
"id": "internal",
"label": "内科",
"children": [
{ "id": "cardiology", "label": "心内科" }
]
}
]action 定义
json
{
"action": {
"event": {
"name": "onTreeCheck",
"type": "check"
}
}
}支持的事件类型:node-click、check、current-change。
注意事项
- 必须设置
height,否则虚拟列表无法正常展示 checkedKeys映射为底层defaultCheckedKeys,expandedKeys映射为defaultExpandedKeys- 不支持
filterMethod等函数形式属性,过滤请通过 Agent 更新dataSource数据