rc-virtualized-tree

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}
      />
    );
  }
}