Skip to content

image

介绍

树组件用来展示具有层级关系的树形数据。

API

Props

参数名描述类型默认值
status默认状态,状态(支持变量绑定)'default'|'hide''default'
fetchByApi通过API获取booleanfalse
data节点数据,传入data,生成对应的树结构TreeNodeData[][]
api节点数据(API获取) ,通过API获取生效时可配置string-
defaultExpandAll默认展开所有节点(注意:该配置只在组件渲染时已有数据情况下生效)booleantrue
expandedKeys展开的节点, 数据为key值数组Array<string | number>-
selectable支持选中,开启后可选中节点booleantrue
selectedKeys选中的节点, 数据为key值数组Array<string | number>-
checkable复选框 ,是否可勾选booleanfalse
checkedKeys勾选的节, 数据为key值数组Array<string | number>-
checkStrictly是否取消父子节点关联booleanfalse
checkedStrategy选中回填方式
all: 返回所有选中的节点
parent: 父子节点都选中时只返回父节点
child: 只返回子节点
'all'|'parent'|'child'-
draggable支持拖拽开启后节点可拖拽booleanfalse
loadAsync开启异步加载booleanfalse
loadMore异步加载函数Action(Object)-
loading加载中遮罩booleanfalse
isVirtualList虚拟列表booleanfalse
virtualListHeight可视区域高度,虚拟列表生效时可配置number200
size控件尺寸'large'|'medium'|'small'|'mini''medium'
showLine展示连接线booleantrue
blockNode节点占据一行booleantrue
uniqueKey唯一标识, 组件的唯一标识string-
fieldNames指定节点数据中的字段名{key: 'key',title: 'title', children: 'children'}
customTitleRender自定义标题渲染,开启后通过jsx对标题自定义渲染booleanfalse
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()
  })
}