树形组件

多层次的结构列表，使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

基础示例，展开第几层

行操作项

右键菜单

可选择及快捷操作

自定义插槽

拖拽示例

连接线

标题前后置

API

属性	说明	类型	默认值
action	动态渲染每一行后面的操作按钮	(row: Recordable) => any	[]
activeKey	当前处于激活状态的条目id	string \| number
addonAfter	input搜索框后置标签	slot
addonBefore	input搜索框前置标签	slot
beforeRightClick	点击右键动态自定义菜单	(...arg: any) => ContextMenuItem[]
blockNode	是否节点占据一行	boolean	`true`
checkable	节点前添加Checkbox复选框	boolean
checkedKeys	选中的节点	CheckKeys[]
checkStrictly	树结构是否粘性选择（父子节点选中状态不再关联）	boolean
clickRowToExpand	点击行展开子节点	boolean	`false`
disabled	将树禁用	boolean	`false`
draggable	设置节点可拖拽	boolean	`false`
expandedKeys	设置展开的树节点	(string \| number)[]
expandOnSearch	搜索完成时自动展开结果	boolean	true
fieldNames	替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段	FieldNames	{ children: 'children', title: 'title',key: 'key' }
filterFn	自定义过滤函数	(searchValue: any, node: TreeItem, fieldNames: FieldNames) => boolean
filterTreeNode	按需筛选树节点（高亮），返回 true	(node: Recordable) => boolean
defaultExpandAll	默认是否展开所有层级	boolean	`false`
defaultExpandLevel	默认展开的层级	string
height	使用 height 属性则切换为虚拟滚动	string \| number
highlight	文字高亮的颜色	string \| number	'#f50'
loading	加载状态	boolean
multiple	支持点选多个节点（节点本身）	boolean	`false`
renderIcon	自定义title之前的图标	(params: Recordable) => string
rightMenuList	右键默认菜单	ContextMenuItem[]
search	是否显示过滤框	boolean
searchValue	默认的搜索框内容	string
selectable	点击行是否可选中	boolean	`false`
selectedKeys	设置选中的key	(string \| number)[]
showIcon	是否显示树结构前面的图标	boolean	`false`
showLine	是否展示连接线	boolean	`false`
title	定义树标题	string
toolbar	是否显示快速操作栏	boolean
treeData	树结构绑定的数据	TreeDataItem[]

事件

事件名称	说明	回调参数
change	checkedKeys改变触发	(checkedKeys) => void
check	点击复选框触发	(checkedKeys, e:{checked: bool, checkedNodes, node, event}) => void
clickNode	点击节点触发	(node: Recordable) => void
drop	drop 触发时调用	({ data, info }) => void

FieldNames

属性	说明	类型
children	作为children的属性名	string
key	作为key的属性名	string
title	作为title的属性名	string

CheckKeys

type KeyType = string | number

type CheckKeys =
  | KeyType[]
  | { 
        checked: string[] | number[]; 
        halfChecked: string[] | number[] 
    }

树形组件 ​

基础示例，展开第几层 ​

行操作项 ​

右键菜单 ​

可选择及快捷操作 ​

自定义插槽 ​

拖拽示例 ​

连接线 ​

标题前后置 ​

API ​

事件 ​

FieldNames ​

CheckKeys ​

树形组件

基础示例，展开第几层

行操作项

右键菜单

可选择及快捷操作

自定义插槽

拖拽示例

连接线

标题前后置

API

事件

FieldNames

CheckKeys