可操作树
action-tree
可操作树
CHANGE LOG
- 2021-12-16
- 扩展 dataSource 中对象可传 title,适用于 label 传 ReactNode 时,title 设置 hover 标题
- 2021-12-2
- 扩展属性,支持 openEllipsis 参数,默认为 false,设置打开后,支持文本溢出显示...
- 扩展属性, 执行 editOkInterceptor 参数,添加/编辑失焦或确定时的拦截器,若返回为 false,则不会触发组件内后续行为,包括文本为空时清空节点和文本不为空时回调 onOperation 方法
- dataSource 中数据格式扩展, 支持 iconFrom 字段, 默认为 img,可设置为 icon,表示节点图标使用 next/Icon 组件
- 组件默认树节点占满一行,并支持该模式下拖拽效果
- 样式调整:拖拽效果颜色、图标尺寸间距、树节点间距、圆角调整等
- 2021-11-15 扩展属性,支持 addNodeIcon 参数,可以指定触发内部添加事件时,新增节点的图标名称
- 2021-11-15 扩展属性,支持 addNodePosition 参数,触发组件内部添加事件时,新增的树节点所在位置,默认为 0 代表顶部
- 2021-11-15 扩展属性,支持 showPopupIcon 参数,默认显示操作按钮浮层中的按钮图标,可以设置为 false,则浮层按钮中不显示图标
- 2021-11-15 扩展属性,支持 moreButtonsMenuProps 参数,透传给内部的 MoreButtonsMenu 组件
- 2021-10-29 内置样式:折叠按钮左外边距$s-2;树节点左侧缩进$s-4;
- 2021-05-06 支付 ref 形式下暴露 onPositionAdd 方法,用于组件外部按钮触发在指定位置(顶部、底部)添加
- 2021-05-06 支付 ref 形式下暴露 onTreeNodeAdd 方法,用于组件外部按钮直接触发某节点下添加行为
- 2020-11-14 添加 props.inputProps 扩展输入框
- 2020-11-18 修改 props.inputProps 扩展输入框
- 2021-01-04 扩展节点 label,添加 labelAppendImg 用于 label 追加图标
- 2021-01-05 扩展节点 label,合并 labelAppendImg 的 defaultProps
- 2021-01-05 扩展节点 label,合并 labelAppendImg 的 defaultProps
- 2021-03-03 扩展 onTreeNodeAdd 等内容,使其适配不同的添加操作
- 2021-03-04 修改初始化 expendedKeys 方式
- 2021-03-05 添加 props.treeProps 空判断
- 2021-03-11 添加 img 标题的 onError 事件,处理图标不存在时显示默认图标
- 2021-03-15 修改操作按钮事件的参数,用于区别不同对象的同一类型的操作
- 2021-03-15 更新主题包,使图标生效
- 2021-03-17 添加节点 title 属性
API
参数名 | 说明 | 类型 | 默认值 |
---|---|---|---|
dataSource | 数据源 签名: Array<Object> 参数: id: {String} 树节点唯一标识 label: {String} 树节点文本 title: {String} 树节点 hover 文本,不传默认取 label icon: {String} 树节点图标路径 iconFrom: {String} 图片获取源,默认为 img(将 icon 作为引用图片路径),可设置为 icon(将 icon 作为 Icon 组件的 iconType) count: {String} 树节点统计值 operation: {Array<Object>} 树节点操作按钮集合 type: {String} 按钮类型,回传到 onOperation 方法,内置 add edit delete 三种类型,可忽略其他参数 icon: {String} 按钮图标 label: {String} 按钮文本 preDivider: {Boolean} 是否在按钮前添加分割线 buttonProps: {Object} Button 属性透传,详见 Button treeNodeProps: {Object} Tree.Node 属性透传,详见 Tree |
Array | - |
draggable | 是否支持拖拽节点 | Boolean | true |
showIcon | 是否显示节点图标(需要设置 dataSource 的 icon) | Boolean | true |
showPopupIcon | 是否显示悬浮按钮...浮层中的按钮图标 | Boolean | true |
showCount | 是否显示统计数字(需要设置 dataSource 的 count) | Boolean | true |
addNodeIcon | 触发内部添加事件时,新增树节点的图标名称 | string | tree_leaf |
addNodePosition | 触发组件内部添加事件时,新增的树节点所在位置(新建后在 onOperation 事件回调的 node 对象中会包含 index) | 'bottom'/number | 0 |
openEllipsis | 开启文本超长时显示... | true/false | false |
onDrop | 拖拽节点放入目标节点内或前后触发的回调函数 签名: Function(dataSource: Array, dragObj: Object, info: Object) => void 参数: dataSource: {Array} 拖拽后的树数据 dragObj: {Object} 当前拖拽的树节点 info: {Object} 当前操作事件对象 |
Function | - |
onOperation | 节点操作按钮触发的回调函数 签名: Function(node: Object, type: String) => void 参数: node: {Object} 当前操作的节点 type: {String} 操作按钮类型,同 dataSource 中的 operation 的 type |
Function | - |
editOkInterceptor | 添加/编辑失焦或确定时的拦截器,若返回为 false,则不会触发组件内后续行为,包括文本为空时清空节点和文本不为空时回调 onOperation 方法 签名: Function(node: Object, value: String) => void 参数: node: {Object} 当前操作的节点 value: {String} 当前输入文本 |
Function | - |
onSelect | 选中或取消选中节点时触发的回调函数 签名: Function(selectedKeys: Array, extra: Object) => void 参数: selectedKeys: {Array} 选中节点 key 的数组 extra: {Object} 额外参数 extra.selectedNodes: {Array} 选中节点的数组 extra.node: {Object} 当前操作的节点 extra.selected: {Boolean} 当前操作是否是选中 |
Function | func.noop |
treeProps | Tree 属性透传,详见 Tree | Object | - |
moreButtonsMenuProps | MoreButtonsMenu 属性透传,详见 MoreButtonsMenu | Object | - |
onPositionAdd | 支付 ref 形式下暴露 onPositionAdd 方法,用于组件外部按钮触发在指定位置(顶部、底部)添加 签名: Function(position: string, clickItem: Object) => void 参数: position: {String} 添加节点的位置,支持 top/bottom clickItem: {Object} 扩展对象,回传到 onOperation 事件 |
Function | - |
onTreeNodeAdd | 支付 ref 形式下暴露 onTreeNodeAdd 方法,用于组件外部按钮直接触发某节点下添加行为 签名: Function(id: string, clickItem: Object) => void 参数: id: {String} 在哪个节点下触发添加 clickItem: {Object} 扩展对象,回传到 onOperation 事件 |
Function | - |