树

介绍

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

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

//节点数据
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、编辑异步加载函数，以获取组织下子节点数据为例：

function action(ctx, params) {
  ctx.loadApi('getChildren', {
    orgCode: params.nodeData.orgCode
  }).then(res => {
    // 设置当前节点的子节点数据
    params.nodeData.children = Array.isArray(res) ? res : [];
    // 调用params.resolve结束加载
    params.resolve()
  })
}