npm package: @riil-frontend/rule-drawer
Description: intro component
Latest version: 5.0.0

# 可操作树

action-tree

可操作树

## CHANGE LOG

-   2021-12-16
    1. 扩展 dataSource 中对象可传 title，适用于 label 传 ReactNode 时，title 设置 hover 标题
-   2021-12-2
    1. 扩展属性，支持 openEllipsis 参数，默认为 false，设置打开后，支持文本溢出显示...
    2. 扩展属性, 执行 editOkInterceptor 参数，添加/编辑失焦或确定时的拦截器，若返回为 false，则不会触发组件内后续行为，包括文本为空时清空节点和文本不为空时回调 onOperation 方法
    3. dataSource 中数据格式扩展， 支持 iconFrom 字段， 默认为 img，可设置为 icon，表示节点图标使用 next/Icon 组件
    4. 组件默认树节点占满一行，并支持该模式下拖拽效果
    5. 样式调整：拖拽效果颜色、图标尺寸间距、树节点间距、圆角调整等
-   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           | 数据源<br><br>**签名**:<br>Array&lt;Object&gt;<br>**参数**:<br>_id_: {String} 树节点唯一标识 <br>_label_: {String} 树节点文本<br><br>_title_: {String} 树节点 hover 文本，不传默认取 label<br>_icon_: {String} 树节点图标路径 <br>_iconFrom_: {String} 图片获取源，默认为 img（将 icon 作为引用图片路径），可设置为 icon（将 icon 作为 Icon 组件的 iconType） <br>_count_: {String} 树节点统计值 <br>_operation_: {Array&lt;Object&gt;} 树节点操作按钮集合<br>&nbsp;&nbsp;&nbsp;&nbsp;_type_: {String} 按钮类型，回传到 onOperation 方法，内置 _add_ _edit_ _delete_ 三种类型，可忽略其他参数 <br>&nbsp;&nbsp;&nbsp;&nbsp;_icon_: {String} 按钮图标<br>&nbsp;&nbsp;&nbsp;&nbsp;_label_: {String} 按钮文本<br>&nbsp;&nbsp;&nbsp;&nbsp;_preDivider_: {Boolean} 是否在按钮前添加分割线<br>&nbsp;&nbsp;&nbsp;&nbsp;_buttonProps_: {Object} Button 属性透传，详见 [Button]<br>_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               | 拖拽节点放入目标节点内或前后触发的回调函数<br><br>**签名**:<br>Function(dataSource: Array, dragObj: Object, info: Object) => void<br>**参数**:<br>_dataSource_: {Array} 拖拽后的树数据 <br>_dragObj_: {Object} 当前拖拽的树节点<br>_info_: {Object} 当前操作事件对象                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Function        | -         |
| onOperation          | 节点操作按钮触发的回调函数<br><br>**签名**:<br>Function(node: Object, type: String) => void<br>**参数**:<br>_node_: {Object} 当前操作的节点 <br>_type_: {String} 操作按钮类型，同 dataSource 中的 operation 的 type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Function        | -         |
| editOkInterceptor    | 添加/编辑失焦或确定时的拦截器，若返回为 false，则不会触发组件内后续行为，包括文本为空时清空节点和文本不为空时回调 onOperation 方法<br><br>**签名**:<br>Function(node: Object, value: String) => void<br>**参数**:<br>_node_: {Object} 当前操作的节点 <br>_value_: {String} 当前输入文本                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Function        | -         |
| onSelect             | 选中或取消选中节点时触发的回调函数<br><br>**签名**:<br>Function(selectedKeys: Array, extra: Object) => void<br>**参数**:<br>_selectedKeys_: {Array} 选中节点 key 的数组<br>_extra_: {Object} 额外参数<br>_extra.selectedNodes_: {Array} 选中节点的数组<br>_extra.node_: {Object} 当前操作的节点<br>_extra.selected_: {Boolean} 当前操作是否是选中                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Function        | func.noop |
| treeProps            | Tree 属性透传，详见 [Tree]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Object          | -         |
| moreButtonsMenuProps | MoreButtonsMenu 属性透传，详见 [MoreButtonsMenu]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Object          | -         |
| onPositionAdd        | 支付 ref 形式下暴露 onPositionAdd 方法,用于组件外部按钮触发在指定位置(顶部、底部)添加<br><br>**签名**:<br>Function(position: string, clickItem: Object) => void<br>**参数**:<br>_position_: {String} 添加节点的位置,支持 top/bottom <br>_clickItem_: {Object} 扩展对象,回传到 onOperation 事件                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Function        | -         |
| onTreeNodeAdd        | 支付 ref 形式下暴露 onTreeNodeAdd 方法,用于组件外部按钮直接触发某节点下添加行为<br><br>**签名**:<br>Function(id: string, clickItem: Object) => void<br>**参数**:<br>_id_: {String} 在哪个节点下触发添加 <br>_clickItem_: {Object} 扩展对象,回传到 onOperation 事件                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Function        | -         |

[tree]: https://fusion.design/pc/component/basic/tree
[morebuttonsmenu]: https://fusion.design/50512/biz/897
[button]: https://fusion.design/pc/component/basic/button