可操作树

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 | 数据源签名:Array<Object>参数:id: {String} 树节点唯一标识 label: {String} 树节点文本title: {String} 树节点 hover 文本，不传默认取 labelicon: {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 属性透传，详见 ButtontreeNodeProps: {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 | - |