拓冰网站定制 
前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载树形表格是展示具有层级结构关系数据的表格形态它通过在普通表格中引入“父子节点”与“展开/收起”交互让数据之间的归属关系一目了然。本指南以 rsuite 组件库中的Table为核心完整讲解树形表格的启用方式、层级数据组织、展开状态控制、自定义单元格与甘特图等实战写法并结合仓库源码说明其底层行为读完即可在业务项目中落地一套可运行的层级数据表格。树形表格是什么树形表格是一种在表格中展示有结构关系父子层级数据的呈现方式。与普通平铺表格相比树形表格能够清晰地展示数据之间的层级关系——例如部门与成员、分类与商品、任务与子任务。rsuite 的Table组件原生支持树形模式只需一个属性即可开启不需要额外引入第三方树表库。从源码结构看rsuite 的Table组件是对底层rsuite-table的再封装见 src/Table/Table.tsx它对外暴露Table.Cell、Table.Column、Table.HeaderCell、Table.ColumnGroup四个子组件树形相关的渲染与展开逻辑由底层表格引擎承担rsuite 负责将isTree、expandedRowKeys、rowKey、renderTreeToggle、onExpandChange等属性透传下去。基本使用isTree children 层级数据启用树形表格只需要两步在Table组件上设置isTree属性让data中的父子关系通过children字段来定义。典型的数据结构如下const data [ { id: 1, name: Car, count: 460, children: [ { id: 1-1, name: Mercedes Benz, count: 300 } // ...更多子节点 ] } ]; Table data{data} isTree rowKeyid其中rowKeyid用于指定行数据的唯一标识字段。树形表格在渲染时会根据rowKey追踪每一行的身份从而正确记录“哪个节点被展开/收起”如果没有唯一标识树形节点的展开状态将无法被可靠地维护。层级结构可以无限嵌套即children内部的节点还可以继续拥有自己的children从而形成多级树。这一点在官方演示“简单甘特图”中体现得很充分见下文。树形表格相关属性速查与树形表格直接相关的属性如下属性类型描述expandedRowKeysstring[]展开的行的key数组defaultExpandedRowKeysstring[]默认展开的行的key数组rowKeystring行数据的唯一标识renderTreeToggle() ReactNode自定义展开/关闭节点的图标onExpandChange(expanded: boolean, rowData: RowData) void展开/关闭节点的回调函数使用要点受控与默认值expandedRowKeys是受控属性传入后由你维护展开集合如果希望组件自己管理展开状态并设置“首次渲染时默认展开哪些行”则使用defaultExpandedRowKeys。除此之外演示中还出现了defaultExpandAllRows用于一次性展开全部层级。回调时机onExpandChange在节点展开/收起时触发回调参数为(expanded, rowData)第一个参数是布尔值展开为true收起为false第二个参数是当前行数据。自定义图标renderTreeToggle允许你完全替换默认的展开/收起箭头图标。展开/收起交互的底层依据展开状态的记录依赖rowKey。从 src/Table/Table.tsx 中可以看到rsuite 在封装时把rowData与dataKey作为Cell的两个关键属性保留dataKey既是数据绑定键也是排序键。树形表格在展开节点时会基于rowKey生成展开集合并把“当前行是否处于展开态”作为状态附着在行上因此自定义单元格Cell必须能拿到rowData才能正确渲染每个节点自己的展开/收起图标与缩进层级。注意树形表格的自定义单元格需要将rowData传递给渲染树的Cell因为在Cell内部将使用它来记录节点的状态参见 rsuite issue #2666。正确写法const CustomCell ({ rowData, ...rest }) { return ( Cell rowData{rowData} {...rest} {rowData.name} /Cell ); };如果不把rowData传回Cell则单元格内部无法感知所在行是否为父节点、是否已展开树形图标与层级缩进就会出现异常。完整演示一基础树形表格先看一个完整的、可直接运行的树形表格示例对应官方演示tree.md。它使用mockTreeData生成三层级数据第一层为汽车厂商、第二层为燃料类型、第三层为具体车型并渲染“评分Rating”与“价格Price”两列import { Table } from rsuite; import { faker } from faker-js/faker; import { mockTreeData } from ./mock; const { Column, HeaderCell, Cell } Table; const data mockTreeData({ limits: [2, 3, 3], // 每一层的节点数量第一层 2 个第二层 3 个第三层 3 个 labels: layer { if (layer 0) { return faker.vehicle.manufacturer(); // 第一层汽车厂商 } else if (layer 1) { return faker.vehicle.fuel(); // 第二层燃料类型 } return faker.vehicle.vehicle(); // 第三层具体车型 }, getRowData: () ({ id: faker.string.numeric(5), price: faker.commerce.price({ min: 10000, max: 1000000, dec: 0, symbol: $ }), rating: faker.finance.amount({ min: 2, max: 5 }) }) }); const App () { return ( Table isTree defaultExpandAllRows bordered cellBordered rowKeyid height{400} data{data} /** shouldUpdateScroll: 数据更新后是否更新滚动条关闭后滚动位置保持不变 **/ shouldUpdateScroll{false} onExpandChange{(isOpen, rowData) { console.log(isOpen, rowData); }} Column flexGrow{1} HeaderCellVehicle /HeaderCell Cell dataKeylabel / /Column Column width{180} HeaderCellRating ⭐️/HeaderCell Cell {rowData Array.from({ length: rowData.rating }).map((_, i) span key{i}⭐️/span) } /Cell /Column Column width{100} HeaderCellPrice /HeaderCell Cell dataKeyprice / /Column /Table ); }; ReactDOM.render(App /, document.getElementById(root));示例中的几个关键点mockTreeData是 rsuite 文档工程提供的树形数据生成工具源码见 docs/utils/mock.ts。它根据limits数组确定每层节点数通过labels函数按层生成标签用getRowData注入业务字段并在非末层节点上自动挂上children数组。第三列的Cell以函数形式渲染接收rowData作为参数依据rating值循环输出星星——这正体现了树形表格单元格可以自由使用行数据。shouldUpdateScroll{false}表示数据更新后不重置滚动条位置避免每次展开/收起节点时视图跳动。完整演示二用树形表格实现简单甘特图树形表格的典型进阶用法是“简单甘特图”把项目生命周期按“任务 → 子任务 → 孙任务”组织成树每一列代表一个日期单元格按日期范围着色从而形成可视化进度条效果对应官方演示gantt.md。数据与列定义如下import { Table } from rsuite; import { faker } from faker-js/faker; const { Column, ColumnGroup, HeaderCell, Cell } Table; const data [ { id: 1, task: Project Lifecycle, startDate: 2024-01-01, endDate: 2024-01-31, children: [ { id: 1-1, task: Requirements analysis, startDate: 2024-01-01, endDate: 2024-01-05, children: [ { id: 1-1-1, task: Gathering requirements, startDate: 2024-01-01, endDate: 2024-01-02 }, { id: 1-1-2, task: Documenting requirements, startDate: 2024-01-03, endDate: 2024-01-05 } ] }, // ...Design / Development / Testing / Deployment / Maintenance 等子任务 ] } ]; const columns Array.from({ length: 31 }).map((_, index) { return { HeaderCell: props { return HeaderCell {...props}{index 1}/HeaderCell; }, Cell: ({ rowData, depth, ...rest }) { const colors [#c8f0c7, #4cb04f, #0f9119]; // 不同层级的着色 const startDate new Date(rowData.startDate); const endDate new Date(rowData.endDate); const day index 1; const inRange startDate.getDate() day day endDate.getDate(); return ( Cell {...rest} depth{depth} style{{ backgroundColor: inRange ? colors[depth] : transparent }} / ); } }; }); const App () { return ( Table isTree defaultExpandAllRows bordered cellBordered rowKeyid autoHeight data{data} rowHeight{30} Column width{300} fixed HeaderCellProject Task/HeaderCell Cell dataKeytask style{{ padding: 5px 0 }} / /Column {columns.map((column, index) { return ( Column key{index} width{40} aligncenter column.HeaderCell / column.Cell / /Column ); })} /Table ); }; ReactDOM.render(App /, document.getElementById(root));这个例子的关键技巧depth参数自定义Cell函数签名中的depth表示当前行所处的树形层级0 表示顶层。示例用它决定着色颜色colors[depth]层级越深颜色越深视觉上直接区分任务粒度。固定任务列任务列设置width{300} fixed横向滚动时任务名称列始终可见日期列在右侧滚动。按日着色每个日期列判断当前行startDate/endDate是否覆盖该日覆盖则填充背景色形成条形进度效果。autoHeight让表格高度随内容自适应配合多层级数据展示完整的甘特图。ColumnGroup本示例中未实际使用分组表头但它与Column、HeaderCell、Cell一同由Table导出见 src/Table/Table.tsx适合在需要“任务名 31 个日期日”这种分组表头结构时使用。指定树形列treeCol 属性默认情况下表格的第一列会被用作树形列即展开图标与缩进所在列。你也可以通过Table.Column上的treeCol属性把任意一列指定为树形列对应官方演示tree-col.md。Table isTree defaultExpandAllRows bordered cellBordered rowKeyid height{400} data{data} shouldUpdateScroll{false} onExpandChange{(isOpen, rowData) { console.log(isOpen, rowData); }} Column width{100} HeaderCellCode/HeaderCell Cell dataKeyid / /Column Column flexGrow{1} treeCol HeaderCellVehicle /HeaderCell Cell dataKeylabel / /Column {/* Rating / Price 列略 */} /Table这里把treeCol加在了“Vehicle”列上因此展开/收起图标与层级缩进都出现在该列而“Code”列保持为普通数据列。这在业务中很实用——例如第一列是“编号”第二列才是“名称”此时让名称列承载树形交互更符合阅读习惯。虚拟化树形表格大数据的性能方案树形表格支持虚拟滚动可以大大提高渲染大量数据的性能对应官方演示virtualized.md。启用方式是在Table上同时设置isTree与virtualizedTable isTree virtualized defaultExpandAllRows bordered cellBordered rowKeyid height{400} data{data} shouldUpdateScroll{false} onExpandChange{(isOpen, rowData) { console.log(isOpen, rowData); }} Column flexGrow{1} HeaderCellVehicle /HeaderCell Cell dataKeylabel / /Column Column width{180} HeaderCellRating ⭐️/HeaderCell Cell {rowData Array.from({ length: rowData.rating }).map((_, i) span key{i}⭐️/span) } /HeaderCell /Column Column width{100} HeaderCellPrice /HeaderCell Cell dataKeyprice / /Column /Table虚拟化示例中使用了limits: [10, 20, 40]的数据规模首层 10、次层 20、末层 40共 10 200 800 1010 行直观验证了在大量层级节点下表格仍能流畅滚动。其原理是虚拟滚动只渲染视口范围内可见的行行数据量再大DOM 节点数量也保持恒定从而避免一次性渲染全部行导致的内存与渲染开销。使用虚拟化时的注意点建议与rowKey配合使用让虚拟滚动器能够稳定识别每一行树形表格的展开状态仍需通过rowKey维护展开大量节点后视口外的行同样不会被创建滚动到对应位置时才渲染height用于约束可视区域高度是虚拟滚动生效的前提之一。在文档工程中查看与复现这些演示以上四个演示树形展示、简单甘特图、指定树形列、虚拟化树形表格均来自本仓库文档工程的 fragments 目录对应的 Markdown 片段文件分别为tree.mdgantt.mdtree-col.mdvirtualized.md这些片段由页面入口 index.tsx 注入示例容器。该入口通过 docs/utils/mock.ts 中的mockTreeData生成示例数据并把mock.js作为沙箱文件一并提供给在线运行环境CodeSandbox因此你既可以在文档页面上直接交互体验也可以把示例代码复制到自己的 React rsuite 项目中运行。小结树形表格用于展示有层级结构的数据开启方式是在Table上设置isTree并用children组织父子关系用rowKey标注行唯一标识。展开状态由expandedRowKeys受控/defaultExpandedRowKeys初始默认值/defaultExpandAllRows全部展开控制通过onExpandChange感知展开事件通过renderTreeToggle自定义图标。自定义单元格必须把rowData回传给Cell否则树形状态无法正常记录与渲染。默认使用第一列作为树形列可用Column上的treeCol属性改为指定列。数据量大时可同时开启isTree与virtualized获得虚拟滚动能力示例表明在约千行的三层级数据下依然流畅。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐grpc-cj跨平台编译与部署指南Windows/Linux/macOS三端实战附CANGJIE_STDX避坑清单grpc cj跨平台编译与部署指南Windows/Linux/macOS三端实战附CANGJIE_STDX避坑清单 本文是 grpc cj 跨平台编译与部前端UI组件仓颉开发者必看TPC-Cangjie-HarmonyOS-API 是什么一文讲透仓颉调用 HarmonyOS API 的完整指南仓颉开发者必看TPC Cangjie HarmonyOS API 是什么一文讲透仓颉调用 HarmonyOS API 的完整指南 TPC Cangji前端UI组件vxe-table虚拟树表格实战层级数据展示优化vxe table虚拟树表格实战层级数据展示优化 一、业务痛点与技术挑战 在企业级应用开发中层级数据如文件目录、组织架构、分类目录的高效展示一直是前端开前端UI组件上一篇3分钟掌握GB/T 7714—2015引用规范终极CSL样式库指南下一篇Super Productivity重新定义你的智能效率工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 rsuite 树形表格（Tree Table）完全指南：层级数据的展示、展开控制与虚拟化实战
前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载树形表格是展示具有层级结构关系数据的表格形态它通过在普通表格中引入“父子节点”与“展开/收起”交互让数据之间的归属关系一目了然。本指南以 rsuite 组件库中的Table为核心完整讲解树形表格的启用方式、层级数据组织、展开状态控制、自定义单元格与甘特图等实战写法并结合仓库源码说明其底层行为读完即可在业务项目中落地一套可运行的层级数据表格。树形表格是什么树形表格是一种在表格中展示有结构关系父子层级数据的呈现方式。与普通平铺表格相比树形表格能够清晰地展示数据之间的层级关系——例如部门与成员、分类与商品、任务与子任务。rsuite 的Table组件原生支持树形模式只需一个属性即可开启不需要额外引入第三方树表库。从源码结构看rsuite 的Table组件是对底层rsuite-table的再封装见 src/Table/Table.tsx它对外暴露Table.Cell、Table.Column、Table.HeaderCell、Table.ColumnGroup四个子组件树形相关的渲染与展开逻辑由底层表格引擎承担rsuite 负责将isTree、expandedRowKeys、rowKey、renderTreeToggle、onExpandChange等属性透传下去。基本使用isTree children 层级数据启用树形表格只需要两步在Table组件上设置isTree属性让data中的父子关系通过children字段来定义。典型的数据结构如下const data [ { id: 1, name: Car, count: 460, children: [ { id: 1-1, name: Mercedes Benz, count: 300 } // ...更多子节点 ] } ]; Table data{data} isTree rowKeyid其中rowKeyid用于指定行数据的唯一标识字段。树形表格在渲染时会根据rowKey追踪每一行的身份从而正确记录“哪个节点被展开/收起”如果没有唯一标识树形节点的展开状态将无法被可靠地维护。层级结构可以无限嵌套即children内部的节点还可以继续拥有自己的children从而形成多级树。这一点在官方演示“简单甘特图”中体现得很充分见下文。树形表格相关属性速查与树形表格直接相关的属性如下属性类型描述expandedRowKeysstring[]展开的行的key数组defaultExpandedRowKeysstring[]默认展开的行的key数组rowKeystring行数据的唯一标识renderTreeToggle() ReactNode自定义展开/关闭节点的图标onExpandChange(expanded: boolean, rowData: RowData) void展开/关闭节点的回调函数使用要点受控与默认值expandedRowKeys是受控属性传入后由你维护展开集合如果希望组件自己管理展开状态并设置“首次渲染时默认展开哪些行”则使用defaultExpandedRowKeys。除此之外演示中还出现了defaultExpandAllRows用于一次性展开全部层级。回调时机onExpandChange在节点展开/收起时触发回调参数为(expanded, rowData)第一个参数是布尔值展开为true收起为false第二个参数是当前行数据。自定义图标renderTreeToggle允许你完全替换默认的展开/收起箭头图标。展开/收起交互的底层依据展开状态的记录依赖rowKey。从 src/Table/Table.tsx 中可以看到rsuite 在封装时把rowData与dataKey作为Cell的两个关键属性保留dataKey既是数据绑定键也是排序键。树形表格在展开节点时会基于rowKey生成展开集合并把“当前行是否处于展开态”作为状态附着在行上因此自定义单元格Cell必须能拿到rowData才能正确渲染每个节点自己的展开/收起图标与缩进层级。注意树形表格的自定义单元格需要将rowData传递给渲染树的Cell因为在Cell内部将使用它来记录节点的状态参见 rsuite issue #2666。正确写法const CustomCell ({ rowData, ...rest }) { return ( Cell rowData{rowData} {...rest} {rowData.name} /Cell ); };如果不把rowData传回Cell则单元格内部无法感知所在行是否为父节点、是否已展开树形图标与层级缩进就会出现异常。完整演示一基础树形表格先看一个完整的、可直接运行的树形表格示例对应官方演示tree.md。它使用mockTreeData生成三层级数据第一层为汽车厂商、第二层为燃料类型、第三层为具体车型并渲染“评分Rating”与“价格Price”两列import { Table } from rsuite; import { faker } from faker-js/faker; import { mockTreeData } from ./mock; const { Column, HeaderCell, Cell } Table; const data mockTreeData({ limits: [2, 3, 3], // 每一层的节点数量第一层 2 个第二层 3 个第三层 3 个 labels: layer { if (layer 0) { return faker.vehicle.manufacturer(); // 第一层汽车厂商 } else if (layer 1) { return faker.vehicle.fuel(); // 第二层燃料类型 } return faker.vehicle.vehicle(); // 第三层具体车型 }, getRowData: () ({ id: faker.string.numeric(5), price: faker.commerce.price({ min: 10000, max: 1000000, dec: 0, symbol: $ }), rating: faker.finance.amount({ min: 2, max: 5 }) }) }); const App () { return ( Table isTree defaultExpandAllRows bordered cellBordered rowKeyid height{400} data{data} /** shouldUpdateScroll: 数据更新后是否更新滚动条关闭后滚动位置保持不变 **/ shouldUpdateScroll{false} onExpandChange{(isOpen, rowData) { console.log(isOpen, rowData); }} Column flexGrow{1} HeaderCellVehicle /HeaderCell Cell dataKeylabel / /Column Column width{180} HeaderCellRating ⭐️/HeaderCell Cell {rowData Array.from({ length: rowData.rating }).map((_, i) span key{i}⭐️/span) } /Cell /Column Column width{100} HeaderCellPrice /HeaderCell Cell dataKeyprice / /Column /Table ); }; ReactDOM.render(App /, document.getElementById(root));示例中的几个关键点mockTreeData是 rsuite 文档工程提供的树形数据生成工具源码见 docs/utils/mock.ts。它根据limits数组确定每层节点数通过labels函数按层生成标签用getRowData注入业务字段并在非末层节点上自动挂上children数组。第三列的Cell以函数形式渲染接收rowData作为参数依据rating值循环输出星星——这正体现了树形表格单元格可以自由使用行数据。shouldUpdateScroll{false}表示数据更新后不重置滚动条位置避免每次展开/收起节点时视图跳动。完整演示二用树形表格实现简单甘特图树形表格的典型进阶用法是“简单甘特图”把项目生命周期按“任务 → 子任务 → 孙任务”组织成树每一列代表一个日期单元格按日期范围着色从而形成可视化进度条效果对应官方演示gantt.md。数据与列定义如下import { Table } from rsuite; import { faker } from faker-js/faker; const { Column, ColumnGroup, HeaderCell, Cell } Table; const data [ { id: 1, task: Project Lifecycle, startDate: 2024-01-01, endDate: 2024-01-31, children: [ { id: 1-1, task: Requirements analysis, startDate: 2024-01-01, endDate: 2024-01-05, children: [ { id: 1-1-1, task: Gathering requirements, startDate: 2024-01-01, endDate: 2024-01-02 }, { id: 1-1-2, task: Documenting requirements, startDate: 2024-01-03, endDate: 2024-01-05 } ] }, // ...Design / Development / Testing / Deployment / Maintenance 等子任务 ] } ]; const columns Array.from({ length: 31 }).map((_, index) { return { HeaderCell: props { return HeaderCell {...props}{index 1}/HeaderCell; }, Cell: ({ rowData, depth, ...rest }) { const colors [#c8f0c7, #4cb04f, #0f9119]; // 不同层级的着色 const startDate new Date(rowData.startDate); const endDate new Date(rowData.endDate); const day index 1; const inRange startDate.getDate() day day endDate.getDate(); return ( Cell {...rest} depth{depth} style{{ backgroundColor: inRange ? colors[depth] : transparent }} / ); } }; }); const App () { return ( Table isTree defaultExpandAllRows bordered cellBordered rowKeyid autoHeight data{data} rowHeight{30} Column width{300} fixed HeaderCellProject Task/HeaderCell Cell dataKeytask style{{ padding: 5px 0 }} / /Column {columns.map((column, index) { return ( Column key{index} width{40} aligncenter column.HeaderCell / column.Cell / /Column ); })} /Table ); }; ReactDOM.render(App /, document.getElementById(root));这个例子的关键技巧depth参数自定义Cell函数签名中的depth表示当前行所处的树形层级0 表示顶层。示例用它决定着色颜色colors[depth]层级越深颜色越深视觉上直接区分任务粒度。固定任务列任务列设置width{300} fixed横向滚动时任务名称列始终可见日期列在右侧滚动。按日着色每个日期列判断当前行startDate/endDate是否覆盖该日覆盖则填充背景色形成条形进度效果。autoHeight让表格高度随内容自适应配合多层级数据展示完整的甘特图。ColumnGroup本示例中未实际使用分组表头但它与Column、HeaderCell、Cell一同由Table导出见 src/Table/Table.tsx适合在需要“任务名 31 个日期日”这种分组表头结构时使用。指定树形列treeCol 属性默认情况下表格的第一列会被用作树形列即展开图标与缩进所在列。你也可以通过Table.Column上的treeCol属性把任意一列指定为树形列对应官方演示tree-col.md。Table isTree defaultExpandAllRows bordered cellBordered rowKeyid height{400} data{data} shouldUpdateScroll{false} onExpandChange{(isOpen, rowData) { console.log(isOpen, rowData); }} Column width{100} HeaderCellCode/HeaderCell Cell dataKeyid / /Column Column flexGrow{1} treeCol HeaderCellVehicle /HeaderCell Cell dataKeylabel / /Column {/* Rating / Price 列略 */} /Table这里把treeCol加在了“Vehicle”列上因此展开/收起图标与层级缩进都出现在该列而“Code”列保持为普通数据列。这在业务中很实用——例如第一列是“编号”第二列才是“名称”此时让名称列承载树形交互更符合阅读习惯。虚拟化树形表格大数据的性能方案树形表格支持虚拟滚动可以大大提高渲染大量数据的性能对应官方演示virtualized.md。启用方式是在Table上同时设置isTree与virtualizedTable isTree virtualized defaultExpandAllRows bordered cellBordered rowKeyid height{400} data{data} shouldUpdateScroll{false} onExpandChange{(isOpen, rowData) { console.log(isOpen, rowData); }} Column flexGrow{1} HeaderCellVehicle /HeaderCell Cell dataKeylabel / /Column Column width{180} HeaderCellRating ⭐️/HeaderCell Cell {rowData Array.from({ length: rowData.rating }).map((_, i) span key{i}⭐️/span) } /HeaderCell /Column Column width{100} HeaderCellPrice /HeaderCell Cell dataKeyprice / /Column /Table虚拟化示例中使用了limits: [10, 20, 40]的数据规模首层 10、次层 20、末层 40共 10 200 800 1010 行直观验证了在大量层级节点下表格仍能流畅滚动。其原理是虚拟滚动只渲染视口范围内可见的行行数据量再大DOM 节点数量也保持恒定从而避免一次性渲染全部行导致的内存与渲染开销。使用虚拟化时的注意点建议与rowKey配合使用让虚拟滚动器能够稳定识别每一行树形表格的展开状态仍需通过rowKey维护展开大量节点后视口外的行同样不会被创建滚动到对应位置时才渲染height用于约束可视区域高度是虚拟滚动生效的前提之一。在文档工程中查看与复现这些演示以上四个演示树形展示、简单甘特图、指定树形列、虚拟化树形表格均来自本仓库文档工程的 fragments 目录对应的 Markdown 片段文件分别为tree.mdgantt.mdtree-col.mdvirtualized.md这些片段由页面入口 index.tsx 注入示例容器。该入口通过 docs/utils/mock.ts 中的mockTreeData生成示例数据并把mock.js作为沙箱文件一并提供给在线运行环境CodeSandbox因此你既可以在文档页面上直接交互体验也可以把示例代码复制到自己的 React rsuite 项目中运行。小结树形表格用于展示有层级结构的数据开启方式是在Table上设置isTree并用children组织父子关系用rowKey标注行唯一标识。展开状态由expandedRowKeys受控/defaultExpandedRowKeys初始默认值/defaultExpandAllRows全部展开控制通过onExpandChange感知展开事件通过renderTreeToggle自定义图标。自定义单元格必须把rowData回传给Cell否则树形状态无法正常记录与渲染。默认使用第一列作为树形列可用Column上的treeCol属性改为指定列。数据量大时可同时开启isTree与virtualized获得虚拟滚动能力示例表明在约千行的三层级数据下依然流畅。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐grpc-cj跨平台编译与部署指南Windows/Linux/macOS三端实战附CANGJIE_STDX避坑清单grpc cj跨平台编译与部署指南Windows/Linux/macOS三端实战附CANGJIE_STDX避坑清单 本文是 grpc cj 跨平台编译与部前端UI组件仓颉开发者必看TPC-Cangjie-HarmonyOS-API 是什么一文讲透仓颉调用 HarmonyOS API 的完整指南仓颉开发者必看TPC Cangjie HarmonyOS API 是什么一文讲透仓颉调用 HarmonyOS API 的完整指南 TPC Cangji前端UI组件vxe-table虚拟树表格实战层级数据展示优化vxe table虚拟树表格实战层级数据展示优化 一、业务痛点与技术挑战 在企业级应用开发中层级数据如文件目录、组织架构、分类目录的高效展示一直是前端开前端UI组件上一篇3分钟掌握GB/T 7714—2015引用规范终极CSL样式库指南下一篇Super Productivity重新定义你的智能效率工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考