2016-12-30 15:43:08 +08:00
|
|
|
|
# Tree
|
|
|
|
|
|
|
|
|
|
|
|
## 代码演示
|
|
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
|
|
## Tree
|
|
|
|
|
|
|参数|说明|类型|默认值|
|
|
|
|
|
|
|:---|:-----|:----|:------|
|
2017-03-02 15:34:31 +08:00
|
|
|
|
|multiple|是否允许选择多个树节点|bool|false
|
|
|
|
|
|
|checkable|是否支持添加在树节点前添加Checkbox|bool|false
|
|
|
|
|
|
|defaultExpandAll|默认是否展开所有节点|bool|false
|
|
|
|
|
|
|defaultExpandedKeys|默认展开指定的节点|String[]|[]
|
|
|
|
|
|
|expandedKeys|指定展开的节点(controlled)|String[]|[]
|
|
|
|
|
|
|autoExpandParent|是否自定展开父节点|bool|true
|
|
|
|
|
|
|defaultCheckedKeys|指定默认被选中的节点key|String[]|[]
|
|
|
|
|
|
|checkedKeys|指定被选中的节点(controlled)（PS：当指定的是父节点，所有的子节点也会被指定；当指定的是子节点，父节点也会被选中。当checkable和checkStrictly都为true,子节点与父节点的选择情况都不会影响到对方|String[]/{checked:Array,halfChecked:Array}|[]
|
2018-12-19 15:05:36 +08:00
|
|
|
|
|checkStrictly|checkable状态下节点选择完全受控（父子节点选中状态不再关联）|bool|false
|
2017-03-02 15:34:31 +08:00
|
|
|
|
|defaultSelectedKeys|指定选中的节点key|String[]|[]
|
|
|
|
|
|
|selectedKeys|指定选中的节点keys(controlled)|String[]|-
|
2018-12-04 10:24:05 +08:00
|
|
|
|
|cancelUnSelect|选中的节点第二次点击时还是选中，不自动取消选中|bool|false
|
2017-11-03 14:37:54 +08:00
|
|
|
|
|showLine|是否显示连接线|bool|false
|
2017-10-18 10:59:51 +08:00
|
|
|
|
|openIcon|自定义展开节点图标的名称[参考这里](http://bee.tinper.org/bee-icon)String[]|-
|
|
|
|
|
|
|closeIcon|自定义关闭节点图标的名称[参考这里](http://bee.tinper.org/bee-icon)String[]|-
|
2017-03-02 15:34:31 +08:00
|
|
|
|
|onExpand|当打开或关闭树节点触发的方法|function(expandedKeys, {expanded: bool, node})|-
|
|
|
|
|
|
|onCheck|当选择事件发生触发的方法|function(checkedKeys, e:{checked: bool, checkedNodes, node, event})|-
|
|
|
|
|
|
|onSelect|当用户选择树节点触发的回调函数|function(selectedKeys, e:{selected: bool, selectedNodes, node, event})|-
|
|
|
|
|
|
|filterTreeNode|过滤树节点的方法（highlight）,当返回true,相关联的节点会高亮|function(node)|-
|
|
|
|
|
|
|loadData|异步加载数据|function(node)|-
|
|
|
|
|
|
|onRightClick|当用户点击右键触发的回调函数|function({event,node})|-
|
2017-10-18 10:59:51 +08:00
|
|
|
|
|draggable|树是否可拖拽（IE>8| bool|false
|
2017-03-02 15:34:31 +08:00
|
|
|
|
|onDragStart|当树节点刚开始拖拽所触发的放方法|function({event,node})|-
|
|
|
|
|
|
|onDragEnter|当拖拽进入触发的方法|function({event,node,expandedKeys})|-
|
|
|
|
|
|
|onDragOver|当拖拽经过触发的方法|function({event,node})|-
|
|
|
|
|
|
|onDragLeave|当拖拽离开触发的方法|function({event,node})|-
|
|
|
|
|
|
|onDragEnd|当拖拽结束触发的方法|function({event,node})|-
|
|
|
|
|
|
|onDrop|当节点放下触发方法|function({event, node, dragNode, dragNodesKeys})|-
|
2018-04-08 15:23:17 +08:00
|
|
|
|
|onDoubleClick|当双击发生触发的方法|function(checkedKeys, e:{node, event})|-
|
2019-01-03 16:40:44 +08:00
|
|
|
|
|focusable|是否开启快捷键功能，使用Tab 键导航获取焦点↓↑选中下、上一个节点，→←展开或者收起一个节点,enter键为节点双击事件|bool|-
|
2019-01-03 16:39:51 +08:00
|
|
|
|
|tabIndexValue|节点获取焦点时，自定义tabIndex的值|Number|0
|
2019-01-14 10:03:50 +08:00
|
|
|
|
|Children|必填，TreeNode组件|node|-
|
2016-12-30 15:43:08 +08:00
|
|
|
|
|
|
|
|
|
|
## TreeNode
|
|
|
|
|
|
|参数|说明|类型|默认值|
|
|
|
|
|
|
|:---|:-----|:----|:------|
|
2017-03-02 15:34:31 +08:00
|
|
|
|
|disabled|节点是否不可用|bool|false
|
|
|
|
|
|
|disableCheckbox|节点的checkbox是否不可用|bool|false
|
2017-10-18 10:59:51 +08:00
|
|
|
|
|title|名称标题|String/element |--
|
2017-03-02 15:34:31 +08:00
|
|
|
|
|key|节点key,和(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys一起用，必须是唯一的|String|-
|
|
|
|
|
|
|isLeaf|是否是叶子节点|bool|false
|
2018-02-05 16:08:35 +08:00
|
|
|
|
|titleClass|名称类名|String|-
|
|
|
|
|
|
|titleStyle|名称样式|Object|-
|
|
|
|
|
|
|switcherClass|switcher类名|String|-
|
2019-01-03 11:20:25 +08:00
|
|
|
|
|switcherStyle|switcher样式|Object|-
|
2019-01-14 10:03:50 +08:00
|
|
|
|
|Children|TreeNode组件/无|node|-
|
2019-01-03 11:20:25 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 快捷键API
|
|
|
|
|
|
|
|
|
|
|
|
| 快捷键 | 类型 |快捷键说明 |
|
|
|
|
|
|
| --- | :---: | --- |
|
|
|
|
|
|
| focusable | function | 是否开启快捷键 |
|
|
|
|
|
|
| tab | - | tab 进入焦点，且选中第一行。|
|
|
|
|
|
|
| ↑、↓ | - | ↑(上箭)、↓(下箭) 选中上一行、选中下一行。 |
|
|
|
|
|
|
| ←、→ | - | ←(左箭)、→(右箭) 收起、展开。 |
|
