Blazor 创建可复用 DataGrid 组件教程

Blazor中可复用DataGrid组件通过泛型+表达式树实现列配置、封装DataGridState管理分页排序、暴露RowClick/OnDataRequested等事件，并支持自定义模板、样式扩展与响应式适配。

Blazor 中创建可复用的 DataGrid 组件，核心是封装通用逻辑（分页、排序、列配置、行点击等），同时保持对业务数据和样式的完全开放。不需要第三方库，纯 Razor 组件 + C# 即可实现高内聚、低耦合的网格。

定义灵活的列配置模型

避免硬编码列名，用泛型 + 表达式树提取字段名和显示文本。定义一个 DataGridColumn 类：

• 包含 Field（Expression>）用于绑定与排序
• Title 字符串控制表头文字
• Width、Sortable、Visible 等开关属性
• 支持自定义模板：用 RenderFragment 替代默认单元格渲染

这样使用者只需传入列集合，无需修改组件内部代码就能增删列或定制某列内容。

封装分页与排序状态管理

把 CurrentPage、PageSize、SortField、SortDirection 封装进一个 DataGridState 类，并提供 ApplySorting 和 ApplyPaging 扩展方法处理 IQueryable 或 IEnumerable。

• 在组件中用 @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 布局）
• 小屏幕下启用水平滚动：外层加
• 选中行高亮？加 :hover 或绑定 selectedItem 动态加 class

基本上就这些。组件越早抽象出“什么不变”（状态管理、事件流）和“什么可变”（列定义、模板、样式），复用性就越强。