ucourse-component-tree v0.0.5

UCourse Component Tree

Tree

properties 属性

• treeData:传入树的数据结构信息
• defaultExpandedKeys:默认展开的节点的 key 值数组
• defaultCheckedKeys:默认选中的节点的 key 值数组
• checkable:整棵树开启单选框
• draggable:树的节点是否可拖拽

methods 方法

• onCheck:当节点单选框被选中时触发

/*
 * @param nodeKey:当前被选中的节点Key值
 * @param checked:当前节点是否被选中
 * @param node:当前节点信息
 * @param checkedLeafNodeList:当前被选中的所有叶子节点
 */
 (nodeKey:string, checked:boolean, node:TreeNodeProps, checkedLeafNodeList:Array<TreeNodeProps>):void

• onChange:当节点被编辑时触发

/*
* @param val:当前被选中的节点Key值
* @param node:当前节点信息
* @param tree:当前树的数据结构
*/
(val:string, node:TreeNodeProps, tree:Array<TreeNodeProps>):void

• onDrag:当节点被拖拽时触发

/*
* @param targetNode:被拖拽的节点信息
* @param sourceNode:接受拖拽的节点信息
* @param tree:当前树的数据结构
*/
(targetNode:TreeNodeProps, sourceNode:TreeNodeProps, tree:Array<TreeNodeProps>):void

TreeNode

properties 属性

• title:节点的展示名称
• key:节点的唯一 key 值，整棵树唯一
• value:节点的属性值
• children:该节点的子节点

Example

<Tree
  ref={treeRef}
  treeData={treeData}
  draggable
  checkable
  onChange={(val: any, node: any, tree: any) => {
    console.log("Tree Event: onChange");
    console.log({
      value: val,
      node,
      tree,
    });
  }}
  onCheck={(key: string, val: boolean, node: any, checkList: Array<any>) => {
    console.log("Tree Event: onCheck");
    console.log({
      key,
      val,
      node,
      checkList,
    });
  }}
  onDrag={(targetNode: any, sourceNode: any, tree: any) => {
    console.log("Tree Event: onDrag");
    console.log({
      targetNode,
      sourceNode,
      tree,
    });
  }}
/>