ucourse-components v0.0.3

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<string>) => void

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

/*
* @param val:当前被选中的节点Key值
* @param node:当前节点信息
* @param tree:当前树的数据结构
*/
(value: 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={value: string, node: TreeNodeProps, tree: Array<TreeNodeProps>) => {
    console.log("Tree Event: onChange");
    console.log({
      value,
      node,
      tree,
    });
  }}
  onCheck={nodeKey: string, checked: boolean, node: TreeNodeProps, checkedLeafNodeList: Array<string>) => {
    console.log("Tree Event: onCheck");
    console.log({
      nodeKey,
      checked,
      node,
      checkedLeafNodeList,
    });
  }}
  onDrag={targetNode: TreeNodeProps, sourceNode: TreeNodeProps, tree: Array<TreeNodeProps>) => {
    console.log("Tree Event: onDrag");
    console.log({
      targetNode,
      sourceNode,
      tree,
    });
  }}
/>