react实现树型表格
实现树型表格的基本思路
React中实现树型表格通常需要结合递归组件和状态管理。核心是将嵌套数据渲染为可展开/折叠的层级结构，同时保持表格的列对齐和样式一致性。
数据结构设计
树型表格的数据通常为嵌套结构，例如：
const treeData = [
{
id: 1,
name: "Parent 1",
children: [
{ id: 2, name: "Child 1-1" },
{ id: 3, name: "Child 1-2" }
]
}
];递归组件实现
创建递归渲染的表格行组件：
const TreeNode = ({ node, level = 0 }) => {
const [expanded, setExpanded] = useState(false);
return (
<>
<tr>
<td style={{ paddingLeft: `${level * 20}px` }}>
{node.children && (
<button onClick={() => setExpanded(!expanded)}>
{expanded ? '-' : '+'}
</button>
)}
{node.name}
</td>
{/* 其他列数据 */}
</tr>
{expanded && node.children?.map(child => (
<TreeNode key={child.id} node={child} level={level + 1} />
))}
</>
);
};完整表格组件
将递归组件嵌入表格结构中：
const TreeTable = ({ data }) => {
return (
<table>
<thead>
<tr>
<th>Name</th>
{/* 其他表头 */}
</tr>
</thead>
<tbody>
{data.map(node => (
<TreeNode key={node.id} node={node} />
))}
</tbody>
</table>
);
};样式优化
添加CSS增强可视化效果：
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
button {
margin-right: 5px;
cursor: pointer;
}功能扩展
- 多列支持：在
TreeNode组件中添加更多<td>元素对应各列数据 - 复选框选择：添加状态管理实现父子节点联动选择
- 懒加载：通过
onExpand回调动态加载子节点数据 - 排序过滤：对扁平化后的数据进行操作后重新构建树形结构
性能优化
对于大型树结构：
- 使用虚拟滚动（如react-window）
- 记忆化组件（React.memo）
- 不可变数据更新
第三方库方案
现有成熟解决方案可直接使用：
react-table+ 树形插件rc-tree表格扩展antd的TreeTable组件
实现时需根据具体需求选择自定义开发或使用库方案，平衡功能完整性和开发效率。
