树组件

介绍

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

API

Props

参数	字段名	描述	类型	默认值
默认状态	status	状态(支持变量绑定) default: 默认 hide: 隐藏	'default'、 'hide'	'default'
通过API获取	fetchByApi	是否通过api获取	boolean	false
节点数据	data	传入data,生成对应的树结构;	TreeNodeData[]	[]
默认展开所有节点	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

TreeNodeData

参数名	描述	类型	默认值
key	唯一标示	string	-
title	该节点显示的标题	string	-
selectable	是否允许选中	boolean	false
disabled	是否禁用节点	boolean	false
disableCheckbox	是否禁用复选框	boolean	false
checkable	是否显示多选框	boolean	false
draggable	是否可以拖拽	boolean	false
isLeaf	是否是叶子节点。动态加载时有效	boolean	false
icon	节点的图标	() => VNode	-
switcherIcon	定制 switcher 图标，优先级大于 tree	() => VNode	-
loadingIcon	定制 loading 图标，优先级大于 tree	() => VNode	-
dragIcon	定制 drag 图标，优先级大于 tree	() => VNode	-
children	子节点	TreeNodeData[]	-

常见场景配置

异步加载

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