树
介绍
树组件用来展示具有层级关系的树形数据。
API
Props
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
status | 默认状态,状态(支持变量绑定) | 'default'|'hide' | 'default' |
fetchByApi | 通过API获取 | boolean | false |
data | 节点数据,传入data,生成对应的树结构 | TreeNodeData[] | [] |
api | 节点数据(API获取) ,通过API获取生效时可配置 | string | - |
defaultExpandAll | 默认展开所有节点(注意:该配置只在组件渲染时已有数据情况下生效) | boolean | true |
expandedKeys | 展开的节点, 数据为key值数组 | Array<string | number> | - |
selectable | 支持选中,开启后可选中节点 | boolean | true |
selectedKeys | 选中的节点, 数据为key值数组 | Array<string | number> | - |
checkable | 复选框 ,是否可勾选 | boolean | false |
checkedKeys | 勾选的节, 数据为key值数组 | Array<string | number> | - |
checkStrictly | 是否取消父子节点关联 | boolean | false |
checkedStrategy | 选中回填方式 all: 返回所有选中的节点 parent: 父子节点都选中时只返回父节点 child: 只返回子节点 | 'all'|'parent'|'child' | - |
draggable | 支持拖拽开启后节点可拖拽 | boolean | false |
loadAsync | 开启异步加载 | boolean | false |
loadMore | 异步加载函数 | Action(Object) | - |
loading | 加载中遮罩 | boolean | false |
isVirtualList | 虚拟列表 | boolean | false |
virtualListHeight | 可视区域高度,虚拟列表生效时可配置 | number | 200 |
size | 控件尺寸 | 'large'|'medium'|'small'|'mini' | 'medium' |
showLine | 展示连接线 | boolean | true |
blockNode | 节点占据一行 | boolean | true |
uniqueKey | 唯一标识, 组件的唯一标识 | string | - |
fieldNames | 指定节点数据中的字段名 | {key: 'key',title: 'title', children: 'children'} | |
customTitleRender | 自定义标题渲染,开启后通过jsx对标题自定义渲染 | boolean | false |
renderTitleFunc | 点击配置,自定义渲染函数,函数字符串 | string | - |
renderTitleFunc | 操作节点 | ButtonItem[] | - |
maxButtons | 最大展示数量 | number | - |
loop | 循环数据, 循环渲染设置 | Loop | - |
Events
事件名 | 描述 | 参数 |
---|---|---|
onSelect | 选中树节点时 | ctx params: {selectedKeys: any[], data: Object} loopDataList: Loop |
onCheck | 勾选树节点时 | ctx params: {checkedKeys: any[], data: Object} loopDataList: Loop |
onExpand | 展开或收起树节点时 | ctx params: {expandKeys: any[], data: Object} loopDataList: Loop |
onDrop | 拖拽释放时 | ctx params: { e: DragEvent; dragNode: TreeNodeData; dropNode: TreeNodeData; dropPosition: number; } loopDataList: Loop |
Type
javascript
//节点数据
type TreeNodeData = {
'key':string,
'selectable':boolean,
'disableCheckbox':boolean,
'checkable':boolean,
'draggable':boolean,
'isLeaf':boolean,
'icon':() => VNode,
'switcherIcon':() => VNode,
'loadingIcon':() => VNode,
'dragIcon':() => VNode,
'children':TreeNodeData[]
}
//操作节点
type ButtonItem = {
"title":string
"icon":string
"showButtonCondition":string
"events":any
}
// 循环
type Loop = {
"data": any[],
"paramName": string,
"indexName": string,
"key": string
}
常见场景配置
异步加载
1、开启异步加载
2、编辑异步加载函数,以获取组织下子节点数据为例:
javascript
function action(ctx, params) {
ctx.loadApi('getChildren', {
orgCode: params.nodeData.orgCode
}).then(res => {
// 设置当前节点的子节点数据
params.nodeData.children = Array.isArray(res) ? res : [];
// 调用params.resolve结束加载
params.resolve()
})
}