虚拟列表树(未发布，仅供学习用)
根据各自项目安装缺少的依赖
git clone https://github.com/imdwpeng/react-virtual-tree.git
cd react-virtual-tree
npm startnpm run pubimport VirtualTree from 'react-virtual-tree';
const menuData = [
{
id: '1',
title: '1',
children: [
{
id: '1-1',
title: '1-1'
},
{
id: '1-2',
title: '1-2'
}
]
},
{
id: '2',
title: '2',
children: [
{
id: '2-1',
title: '2-1'
},
{
id: '2-2',
title: '2-2'
}
]
}
]
<div style={{ height: 790, width: 160 }}>
<VirtualTree
uniqKey="key"
showSwitcherIcon={false}
itemHeight={40}
dataSource={menuData}
selectedKeys={selectedKeys}
expandKeys={expandKeys}
onExpandChange={handleExpandChange}
render={(item) => <div>{item.title}</div>}
/>
</div>| 参数 | 说明 | 类型/数据格式 | 默认值 |
|---|---|---|---|
| dataSource | 树结构数据 | array | - |
| defaultExpandAll | 默认展开父节点 | boolean | false |
| expandKeys | （受控）展开指定的树节点，与onExpandChange配合使用 | string[] | - |
| itemHeight | 行高 | number | 24 |
| selectedKeys | （受控）设置选中的树节点，与onSelect配合使用 | string[] | - |
| space | 间隔 | number | 24 |
| showSwitcherIcon | 自定义树节点的展开/折叠图标 | boolean | false |
| uniqKey | 行 key 的取值 | string | 'id' |
| render | 渲染节点函数 | (item) => JSX.Element | - |
| onExpandChange | 展开/收起节点时触发 | function(expandedKeys) | - |
| onSelect | 点击树节点触发 | function(selectedNode) | - |
详情请参考 CHANGELOG