Blazor 怎么实现一个通用的数据表格组件

Blazor通用数据表格通过@typeparam TItem实现泛型，接收IReadOnlyList数据并用RenderFragment自定义行渲染；支持分页、排序（含嵌套属性）、搜索（多字段模糊匹配）；提供声明式与模板化列配置；暴露OnRowClick等事件及IsLoading状态。

支持泛型和数据绑定的表格基础结构

Blazor 里实现通用数据表格，核心是用 @typeparam TItem 声明泛型参数，让组件能接收任意类型的数据集合。组件接收 IReadOnlyList Data 作为输入，配合 [Parameter] public RenderFragment ChildContent { get; set; } 让使用者自定义每行渲染逻辑——这比硬编码列名更灵活，也避免反射带来的性能损耗和复杂度。

内置分页、排序和搜索能力

通用表格常需分页和筛选。可添加如下参数：

• CurrentPage 和 PageSize 控制分页，内部用 Data.Skip((CurrentPage - 1) * PageSize).Take(PageSize) 截取数据
• SortField 和 SortDirection（Asc/Desc）配合 OrderBy/OrderByDescending 动态排序，用 Expression> 或字符串字段名 + System.linq.Dynamic.Core 库实现（推荐后者，简洁且支持嵌套属性如 "User.Name"）
• SearchText 触发客户端过滤，对字符串属性做 Contains 模糊匹配，支持多字段联合搜索（例如 Name、Email、Description）

列配置与模板化表头/单元格

为兼顾灵活性和易用性，可提供两种列定义方式：

• 声明式列（推荐）：通过 组件，内部用表达式提取值并生成表头；支持 Sortable="true"、Filterable="true" 等开关
• 模板化列：用
  操作

  Edit(item)">编辑，完全由使用者控制内容

表头点击触发排序时，自动切换方向并重新渲染；搜索框 debounce 防抖（比如 300ms），避免频繁重算。

状态管理与事件暴露

组件应暴露关键交互事件，方便父组件响应：

• OnRowClick：传入 EventCallback，点击某行时回调
• OnPageChanged：传入 EventCallback，当前页变化时通知
• OnSortChanged：传入 EventCallback
• 内部维护 IsLoading 状态，配合
  ...

  显示加载中提示

不强制要求服务端请求逻辑写在组件内，保持它专注 UI 和状态协调——数据获取仍由父组件或独立 service 负责，符合 Blazor 的职责分离原则。

基本上就这些。不复杂但容易忽略的是：泛型约束（比如加 where TItem : class）、空数据占位提示（@if (!Data?.Any()) {

暂无数据

}）、以及响应式断点下隐藏非关键列（用 CSS class 控制）。做好这几处，一个轻量、可复用、易扩展的 Blazor 数据表格就立住了。