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

来源:这里教程网 时间:2026-02-21 17:39:26 作者:

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

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

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

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

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

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

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

声明式列(推荐):通过
<tablecolumn title="姓名" field="x => x.Name"></tablecolumn>
组件,内部用表达式提取值并生成表头;支持
Sortable="true"
Filterable="true"
等开关
模板化列:用
<tablecolumn><header>操作</header><cell context="item"><button> Edit(item)">编辑</button></cell></tablecolumn>
,完全由使用者控制内容

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

状态管理与事件暴露

组件应暴露关键交互事件,方便父组件响应:

OnRowClick:传入
EventCallback<titem></titem>
,点击某行时回调
OnPageChanged:传入
EventCallback<int></int>
,当前页变化时通知
OnSortChanged:传入
EventCallback
内部维护
IsLoading
状态,配合
<div class="loading">...</div>
显示加载中提示

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

基本上就这些。不复杂但容易忽略的是:泛型约束(比如加

where TItem : class
)、空数据占位提示(
@if (!Data?.Any()) { <p>暂无数据</p> }
)、以及响应式断点下隐藏非关键列(用 CSS class 控制)。做好这几处,一个轻量、可复用、易扩展的 Blazor 数据表格就立住了。

相关推荐