Virtualized Tree

Getting Started

Install rc-virtualized-tree using npm

npm install rc-virtualized-tree --save

import style

import 'rc-virtualized-tree/styles.css'

Prop Types

| Property | Type | Required? | Description | Default | | :------------------ | :---------------------------------------- | :-------: | :--------------------------------------------------- | :------ | | treeData | Array | ✓ | | | | expandedKeys | Array | | 展开节点的 key | | | rowHeight | Number | | 行高 | 22px | | defaultExpandAll | Boolean | | 是否展开所有节点，只在初始化时有效 | false | | showLevelLine | Boolean | | 节点前方是否展示虚线 | true | | selectedKeys | Array | | 选中节点，会加背景颜色 | | | defaultFolderIcon | ReactNode | ((item: T) => ReactNode) | | 非叶子节点图标，设为 null 时不展示图标 | 文件夹 | | defaultLeafIcon | ReactNode | ((item: T) => ReactNode) | | 叶子节点图标，设为 null 时不展示图标 | 文件 | | searchKeywords | String | | 过滤关键字 | | | searchOnlyShowMatch | Boolean | | 过滤时是否只展示匹配的节点 | true | | forSearchKey | String | | 过滤时使用哪个字段匹配，默认'name' | 'name' | | rowRender | (item: T) => ReactNode | null | | 自定义每项展示内容，默认展示'name'的值 | 'name' | | className | String | | 给组件添加 class | | | rowClassName | (item: T) => string | | 给每项添加 class | | | loadingKeys | Array | | 展开/收起按钮显示 loading 状态 | | | invalidationProps | Object | | 值发生变化时触发 render | | | onItemClick | (item: T) => void | | 鼠标单击事件 | | | onItemDoubleClick | (item: T) => void | | 鼠标双击事件 | | | onContextMenu | (item: T) => void | | 鼠标右键事件 | | | onExpand | (key: string, open: boolean) => void | | 点击展开/收起，设置该属性后需要自行设置 expandedKeys | | | draggable | ((item: T) => boolean) | boolean | | 是否可拖拽 | false | | onDragAndDrop | (dragItem: T, dropItem: T) => void | | 拖放 | | | onDragToRoot | (dragItem: T) => void | | | |

示例

import VirtualizedTree from "rc-virtualized-tree";
import "rc-virtualized-tree/styles.css";

export default class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: [
        {
          key: "1",
          name: "1",
          isLeaf: false,
          children: [
            {
              key: "1-1",
              name: "1-1",
              isLeaf: false,
              children: [
                {
                  key: "1-1-1",
                  name: "1-1-1",
                  isLeaf: true,
                },
                {
                  key: "1-1-2",
                  name: "1-1-2",
                  isLeaf: false,
                },
              ],
            },
          ],
        },
        {
          key: "2",
          name: "2",
          isLeaf: false,
          children: [
            {
              key: "2-1",
              name: "2-1",
              isLeaf: true,
            },
            {
              key: "2-2",
              name: "2-2",
              isLeaf: true,
            },
            {
              key: "2-3",
              name: "2-3",
              isLeaf: true,
            },
          ],
        },
        {
          key: "3",
          name: "3",
          isLeaf: false,
          children: [
            {
              key: "3-1",
              name: "3-1",
              isLeaf: true,
            },
          ],
        },
      ],
    };
  }

  itemClick = (item) => {
    console.log("click", item);
  };

  render() {
    return (
      <VirtualizedTree
        treeData={this.statetreeData}
        onItemClick={this.itemClick}
      />
    );
  }
}