Blazor中可复用DataGrid组件通过泛型+表达式树实现列配置、封装DataGridState管理分页排序、暴露RowClick/OnDataRequested等事件，并支持自定义模板、样式扩展与响应式适配。
Blazor 中创建可复用的 DataGrid 组件，核心是封装通用逻辑（分页、排序、列配置、行点击等），同时保持对业务数据和样式的完全开放。不需要第三方库，纯 Razor 组件 + C# 即可实现高内聚、低耦合的网格。
定义灵活的列配置模型
避免硬编码列名，用泛型 + 表达式树提取字段名和显示文本。定义一个 DataGridColumn<TItem> 类：
- 包含
Field（Expression<Func<TItem, object>>）用于绑定与排序 -
Title字符串控制表头文字 -
Width、Sortable、Visible等开关属性 - 支持自定义模板：用
RenderFragment<TItem>替代默认单元格渲染
这样使用者只需传入列集合，无需修改组件内部代码就能增删列或定制某列内容。
封装分页与排序状态管理
把 CurrentPage、PageSize、SortField、SortDirection 封装进一个 DataGridState<TItem> 类，并提供 ApplySorting 和 ApplyPaging 扩展方法处理 IQueryable<TItem> 或 IEnumerable<TItem>。
- 在组件中用
@bind-CurrentPage支持双向绑定，方便父组件响应页码变化 - 排序点击列头时，自动切换升/降序，触发
StateHasChanged() - 分页控件（如页码按钮、跳转输入框）复用同一套状态，不重复维护逻辑
暴露关键事件与生命周期钩子
真正可复用的组件必须让使用者能干预行为。为 DataGrid 添加：
-
RowClick：回调参数为TItem，支持导航或弹窗详情 -
OnDataRequested：异步委托，用于加载远程数据（替代直接传Items） -
OnInitializedAsync内触发首次加载，配合IsLoading状态显示骨架屏 -
ChildContent渲染空白态、加载中、无数据提示，比写 if-else 更清晰
样式与响应式适配建议
默认用 Bootstrap 或 Tailwind 的基础表格类（如 table table-striped），但不要锁死 CSS：
- 通过
Class参数接收额外 class 名，叠加自定义样式 - 列宽支持
px、%、fr（若用 Flex/Grid 布局） - 小屏幕下启用水平滚动：外层加
<div class="overflow-x-auto"> - 选中行高亮？加
:hover或绑定selectedItem动态加 class
基本上就这些。组件越早抽象出“什么不变”（状态管理、事件流）和“什么可变”（列定义、模板、样式），复用性就越强。
