树组件

介绍

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

API

Props

参数	字段名	描述	类型	默认值
默认状态	status	状态(支持变量绑定) default: 默认 hide: 隐藏	'default'、 'hide'	'default'
通过API获取	fetchByApi	是否通过api获取	boolean	false
节点数据（API获取）	api	fetchByApi为true时的所选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

Props 样式

参数	字段名	描述	类型	默认值
控件尺寸	size	控件尺寸	'large'、'medium'、'small'、'mini'	'medium'
展示连接线	showLine	展示连接线	boolean	true
节点占据一行	blockNode	节点占据一行	boolean	true

Props 高级

参数	字段名	描述	类型	默认值
指定节点数据中的字段名	fieldNames	指定节点数据中的字段名	{key: 'key',title: 'title', children: 'children'}
自定义标题渲染	customTitleRender	开启后通过jsx对标题自定义渲染	boolean	false
点击配置	renderTitleFunc	自定义渲染函数，函数字符串	string	-
节点操作	buttons	操作节点配置	Array<ButtonItem>	-
最大展示数量	maxButtons	节点操作最多展示的数量	number	-

events

事件名	说明	回调参数
onSelect	选中树节点时	ctx params: {selectedKeys: any[], data: Object} loopDataList: LoopData
onCheck	勾选树节点时	ctx params: {checkedKeys: any[], data: Object} loopDataList: LoopData
onExpand	展开或收起树节点时	ctx params: {expandKeys: any[], data: Object} loopDataList: LoopData
onDrop	拖拽释放时	ctx params: { e: DragEvent; dragNode: TreeNodeData; dropNode: TreeNodeData; dropPosition: number; } loopDataList: LoopData

Type

LoopData

参数名	描述	类型
indexName	索引变量名	string
paramName	迭代变量名	string
row	当前迭代数据元素	any
rowIndex	当前迭代数据索引	any
ref	完整循环数组数据	ComputedRefImpl<Array>

ButtonItem

参数名	描述	类型
title	标题	string
icon	图标	-
showButtonCondition	显示条件	String<function>
events	事件	any

常见场景配置

异步加载

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()
  })
}