Table表格
展示行列数据。
何时使用
- 当有大量结构化的数据需要展现时;
- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
如何使用
指定表格的数据源 DataSource
为一个数组,可用 OnChange 事件传入的查询状态进行分页和筛选。
两个数据列类型:
- PropertyColumn 继承自 Column,用
Property="c=>c.User.Name"
绑定列,支持级联访问。在 .NET6 以下使用需指定TItem
,TProp
的类型。 - Column 用
@bind-Field="context.UssrName"
绑定时不支持级联访问类的属性(例如:context.User.Name
),但可以用DataIndex="'User.Name'"
绑定。
其他列类型
- ActionColumn 用于放置操作按钮,也可以作为不绑定类型的模板。
- Selection 用来开启选择列,并提供选择框。
Examples
Table API#
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
AutoColIndexes | 属性Enable or disable automatic column index assignments. Should be disabled if complex column structure is used and index assigned via ColIndex parameter. | Boolean | -- |
RerenderStrategy | 属性Render mode of table. See RerenderStrategy documentation for details. |
RerenderStrategy | -- |
DataSource | 属性要在表格中显示的数据 | IEnumerable<TItem> | -- |
ChildContent | 属性表的内容。通常将包含 PropertyColumn 和 ActionColumn 元素。 |
RenderFragment<TItem> | -- |
GroupTitleTemplate | 属性分组块的标题模板 | RenderFragment<GroupResult<TItem>> | -- |
GroupFooterTemplate | 属性分组块的页脚模板 | RenderFragment<GroupResult<TItem>> | -- |
RowTemplate | 属性行模板 | RenderFragment<RowData<TItem>> | -- |
ColumnDefinitions | 属性列定义的模板 | RenderFragment<TItem> | -- |
HeaderTemplate | 属性页眉模板 | RenderFragment<TItem> | -- |
ExpandTemplate | 属性用于展开行时显示内容的模板 | RenderFragment<RowData<TItem>> | -- |
DefaultExpandAllRows | 属性初始,是否展开所有行 | Boolean | -- |
DefaultExpandMaxLevel | 属性使用 DefaultExpandAllRows 时的最大扩展级别。当树记录有循环引用时,该属性用于避免死循环。默认值为 4。 | Int32 | -- |
RowExpandable | 属性确定特定行是否可扩展的函数 | Func<RowData<TItem>, Boolean> | true for any rows |
TreeChildren | 属性儿童树项目 | Func<TItem, IEnumerable<TItem>> | Enumerable.Empty |
OnChange | 属性Callback executed when table initialized, paging, sorting, and filtering changes. | EventCallback<QueryModel<TItem>> | -- |
OnRow | 属性设置行属性 | Func<RowData<TItem>, Dictionary<String, Object>> | -- |
OnHeaderRow | 属性设置标题行属性 | Func<Dictionary<String, Object>> | -- |
Loading | 属性表格是否正在加载 | Boolean | false |
Title | 属性表格标题文字 | String | -- |
TitleTemplate | 属性表格标题内容 | RenderFragment | -- |
Footer | 属性页脚文字 | String | -- |
FooterTemplate | 属性页脚内容 | RenderFragment | -- |
Size | 属性桌子尺寸 | TableSize | -- |
Locale | 属性默认文案设置,目前包括排序、过滤、空数据文案 | TableLocale | -- |
Bordered | 属性有无边框表格 | Boolean | false |
Striped | 属性Striped table or not | Boolean | false |
ScrollX | 属性设置水平滚动,也可以用来指定滚动区域的宽度,可以设置为像素值,百分比 | String | -- |
ScrollY | 属性设置垂直滚动,也可以用来指定滚动区域的高度,可以设置为像素值 | String | -- |
AutoHeight | 属性自动拉升表格高度至满屏显示 | Boolean | -- |
ScrollBarWidth | 属性滚动条宽度 | String | 17px |
IndentSize | 属性显示树数据时,每一层缩进的宽度,单位px | Int32 | 15 |
ExpandIconColumnIndex | 属性自定义展开图标所在列的索引 | Int32 | 0 |
RowClassName | 属性确定特定行的类名的函数 | Func<RowData<TItem>, String> | -- |
ExpandedRowClassName | 属性展开时确定特定行的类名的函数 | Func<RowData<TItem>, String> | -- |
OnExpand | 属性行扩展时执行的回调 | EventCallback<RowData<TItem>> | -- |
SortDirections | 属性支持的排序方式,涵盖Table中的sortDirections | SortDirection[] | -- |
TableLayout | 属性table元素的table-layout属性,设置为fixed表示内容不会影响列的布局 | String | -- |
OnRowClick | 属性单击一行时执行的回调 | EventCallback<RowData<TItem>> | -- |
RemoteDataSource | 属性对于更复杂的用例,数据源是否是远程的 | Boolean | false |
Responsive | 属性当设置为 true 并且屏幕宽度小于 960px 时,表格将切换到小屏幕模式。在小屏模式下,目前只支持部分特性,在具有分组、展开列、树状数据、汇总单元格等特性的表格中会出现样式错误。 | Boolean | false |
EmptyTemplate | 属性自定义表为空时的空模板 | RenderFragment | -- |
RowKey | 属性指定每行的标识符 | Func<TItem, Object> | -- |
Resizable | 属性启用可调整大小的列 | Boolean | -- |
FieldFilterTypeResolver | 属性设置字段筛选条件类型解析程序 | IFieldFilterTypeResolver | -- |
EnableVirtualization | 属性 | Boolean | -- |
HidePagination | 属性Whether to hide pagination or not. Note: When the HidePagination is set to true, PageSize should not be set, so all the data will be displayed. Otherwise, if PageSize is set, the number of rows per page will be displayed according to PageSize. This requires the user to handle the logic of the pagging themselves. |
Boolean | -- |
PaginationPosition | 属性分页的位置。有效值:topLeft、topCenter、topRight、bottomLeft、bottomCenter、bottomRight | String | bottomRight |
PaginationTemplate | 属性分页的自定义渲染 | RenderFragment<ValueTuple<Int32, Int32, Int32, String, EventCallback<PaginationEventArgs>>> | -- |
Total | 属性总记录 | Int32 | -- |
TotalChanged | 属性记录总数变化时执行的回调 | EventCallback<Int32> | -- |
PageIndex | 属性Currently visible page. The first page is 1. If it is set to less than 1, the AntDesign.Table`1.OnChange callback won't be invoked. |
Int32 | 1 |
PageIndexChanged | 属性 | EventCallback<Int32> | -- |
PageSize | 属性每页记录数 | Int32 | 10 |
PageSizeChanged | 属性 | EventCallback<Int32> | -- |
OnPageIndexChange | 属性当前可见页面改变时执行的回调 | EventCallback<PaginationEventArgs> | -- |
OnPageSizeChange | 属性页面大小改变时执行的回调 | EventCallback<PaginationEventArgs> | -- |
SelectedRows | 属性跨页面选择的行 | IEnumerable<TItem> | -- |
SelectedRowsChanged | 属性选中行改变时执行的回调 | EventCallback<IEnumerable<TItem>> | -- |
OnSelectAll | 属性单击“SelectAll”按钮时执行的回调。 这对于在表虚拟化或不仅在当前页面上显示时选择所有行非常有用。 选择所有行时参数为 true,取消选择所有行时为 false。 |
EventCallback<Boolean> | -- |
Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
Style | 属性指定 DOM 元素的内联样式。 | String | -- |
RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
方法签名 | 返回类型 | 描述 |
---|---|---|
ReloadData() | void | 重新加载表的数据,转到第 1 页 |
ReloadData(Int32? pageIndex, Int32? pageSize) | void | 重新加载表的数据并以页面大小转到特定页面 |
ReloadData(QueryModel queryModel) | void | 从提供的查询模型中重新加载表的数据 |
ResetData() | void | 将表重置为其默认视图。转到第 1 页,默认页面大小并清除排序和过滤器。 |
GetQueryModel() | QueryModel | 获取表的查询模型 |
ExpandAll() | void | |
CollapseAll() | void | |
SelectAll() | void | 选择当前页面的所有行 |
UnselectAll() | void | 取消选择当前页面的所有行 |
SetSelection(ICollection<String> keys) | void | 如果可能,请改用 |
SetSelection(IEnumerable<TItem> items) | void | 设置所有选定项 |
SetSelection(TItem item) | void | 选择一项 |
PropertyColumn API#
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
Property | 属性定义要在此列的单元格中显示的值。 | Expression<Func<TItem, TProp>> | -- |
FieldExpression | 属性获取字段数据的表达式 | Expression<Func<TProp>> | -- |
FilterDropdown | 属性此列代表的字段 | RenderFragment | -- |
Field | 属性使用 @bind-Field 绑定到 TItem 的属性,建议使用 PropertyColumn 代替 |
TProp | -- |
FieldChanged | 属性仅用于 @bind-Field 并获取表达式,无其他用途 | EventCallback<TProp> | -- |
Title | 属性列的标题。使用以下优先级顺序:AntDesign.ColumnBase.Title ,AntDesign.Column`1.DisplayName ,然后是 AntDesign.Column`1.FieldName |
String | -- |
DataIndex | 属性数据项中列数据的对应路径,支持通过数组查询嵌套路径 | String | -- |
Format | 属性列数据序列化规则,如 DateTime.ToString("XXX") | String | -- |
Sortable | 属性是否允许排序 | Boolean | false |
SorterCompare | 属性自定义排序的比较函数 | Func<TProp, TProp, Int32> | -- |
SorterMultiple | 属性允许的同时排序数 | Int32 | -- |
ShowSorterTooltip | 属性悬停在排序按钮上时是否显示工具提示 | Boolean | true |
SortDirections | 属性允许的排序方向 | SortDirection[] | -- |
DefaultSortOrder | 属性默认排序方向 | SortDirection? | -- |
OnCell | 属性设置单元格属性 | Func<CellData, Dictionary<String, Object>> | -- |
OnHeaderCell | 属性设置标题单元格属性 | Func<Dictionary<String, Object>> | -- |
Filterable | 属性该列是否可过滤 | Boolean | false |
Grouping | 属性该列是否用于分组 | Boolean | -- |
GroupBy | 属性指定列的分组函数 | Func<TProp, Object> | -- |
Filters | 属性列的筛选选项 | IEnumerable<TableFilter<TProp>> | -- |
DefaultFilters | 属性是否允许多个过滤器 | IEnumerable<TableFilter> | true |
FilterMultiple | 属性是否允许多个过滤器 | Boolean | -- |
FieldFilterType | 属性列的筛选器类型 | IFieldFilterType | -- |
OnFilter | 属性判断过滤时是否显示行的函数 参数1:过滤项的值 参数2:列的值 |
Expression<Func<TProp, TProp, Boolean>> | -- |
Filtered | 属性dataSource 是否被过滤。当为 true 时,过滤器图标将被激活。 | Boolean | -- |
CellRender | 属性设置表中显示的列内容 | RenderFragment<CellData<TProp>> | -- |
DisplayName | 列的显示名称 | String | -- |
FieldName | 列的字段名称 | String | -- |
SortModel | 列的排序模型 | ITableSortModel | -- |
FilterModel | 柱的过滤模型 | ITableFilterModel | -- |
TitleTemplate | 属性列标题的标题内容 | RenderFragment | -- |
Width | 属性列宽 | String | -- |
HeaderStyle | 属性标题单元格的样式 | String | -- |
RowSpan | 属性行跨度 | Int32 | 1 |
ColSpan | 属性列跨度 | Int32 | 1 |
HeaderColSpan | 属性标题栏跨度 | Int32 | 1 |
Fixed | 属性修复一个列 | ColumnFixPlacement? | -- |
ChildContent | 属性专栏内容 | RenderFragment | -- |
Ellipsis | 属性设置为 true 时用省略号切断标题标题 | Boolean | false |
Hidden | 属性列是否隐藏 | Boolean | false |
Align | 属性列内容对齐 | ColumnAlign | -- |
ColIndex | 属性该列在表中的索引 | Int32 | -- |
Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
Style | 属性指定 DOM 元素的内联样式。 | String | -- |
RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
ActionColumn API#
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
CellRender | 属性一行的列内容。优先于 AntDesign.ColumnBase.ChildContent |
RenderFragment<CellData> | -- |
Title | 属性列标题的标题 | String | -- |
TitleTemplate | 属性列标题的标题内容 | RenderFragment | -- |
Width | 属性列宽 | String | -- |
HeaderStyle | 属性标题单元格的样式 | String | -- |
RowSpan | 属性行跨度 | Int32 | 1 |
ColSpan | 属性列跨度 | Int32 | 1 |
HeaderColSpan | 属性标题栏跨度 | Int32 | 1 |
Fixed | 属性修复一个列 | ColumnFixPlacement? | -- |
ChildContent | 属性专栏内容 | RenderFragment | -- |
Ellipsis | 属性设置为 true 时用省略号切断标题标题 | Boolean | false |
Hidden | 属性列是否隐藏 | Boolean | false |
Align | 属性列内容对齐 | ColumnAlign | -- |
ColIndex | 属性该列在表中的索引 | Int32 | -- |
Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
Style | 属性指定 DOM 元素的内联样式。 | String | -- |
RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
Selection API#
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
Type | 属性The type of input to use for the selection column (checkbox or radio) | SelectionType | SelectionType.Checkbox |
Disabled | 属性选择列是否被禁用。 | Boolean | -- |
Key | 属性现在没用了。请改用 Table 的 RowKey。 Obsolete 将在未来的版本中删除。 |
String | -- |
CheckStrictly | 属性精确检查表格行;父行和子行未关联 | Boolean | -- |
CellRender | 属性自定义单元格的内容。 | RenderFragment<CellData> | -- |
Selected | Boolean | -- | |
Title | 属性列标题的标题 | String | -- |
TitleTemplate | 属性列标题的标题内容 | RenderFragment | -- |
Width | 属性列宽 | String | -- |
HeaderStyle | 属性标题单元格的样式 | String | -- |
RowSpan | 属性行跨度 | Int32 | 1 |
ColSpan | 属性列跨度 | Int32 | 1 |
HeaderColSpan | 属性标题栏跨度 | Int32 | 1 |
Fixed | 属性修复一个列 | ColumnFixPlacement? | -- |
ChildContent | 属性专栏内容 | RenderFragment | -- |
Ellipsis | 属性设置为 true 时用省略号切断标题标题 | Boolean | false |
Hidden | 属性列是否隐藏 | Boolean | false |
Align | 属性列内容对齐 | ColumnAlign | -- |
ColIndex | 属性该列在表中的索引 | Int32 | -- |
Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
Style | 属性指定 DOM 元素的内联样式。 | String | -- |
RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
QueryModel API#
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
PageIndex | Int32 | -- | |
PageSize | Int32 | -- | |
StartIndex | Int32 | -- | |
OffsetRecords | 请使用 StartIndex Obsolete 将在未来的版本中删除。 |
Int32 | -- |
SortModel | IList<ITableSortModel> | -- | |
FilterModel | IList<ITableFilterModel> | -- |
方法签名 | 返回类型 | 描述 |
---|---|---|
ExecuteQuery(IQueryable<TItem> query) | IQueryable<TItem> | |
GetFilterExpression() | Expression<Func<TItem, Boolean>> | 获取 Entity Framework 等 ORM 的当前过滤器表达式。您可以通过对数据源执行表达式来获取筛选后的数据。 |
CurrentPagedRecords(IQueryable<TItem> query) | IQueryable<TItem> | |
Clone() | Object |
常问问题#
OnChange
为什么会被调用两次?
Table 组件支持预渲染,即在服务端渲染阶段会调用 OnChange
以便查询数据,并渲染出HTML作为请求响应返回。当浏览器上的 Blazor 实例启动时,会再次调用一次 OnChange
。官方文档 预呈现 ASP.NET Core Razor 组件 中有一些优化方式。另外,如果没有 SEO 需求,可考虑关闭预呈现
如何避免在首次加载时触发 OnChange
?
默认情况下会在 Table 初始化完毕时自动触发 OnChange
。我们推荐用它来替代 OnInitialized{Async}
去加载数据,因为在 OnChange
调用时会传入 Table 的一些信息和状态,比如列名、排序、筛选、分页等。
如果希望避免在首次加载时触发 OnChange
,可以设置 PageIndex = 0,以表示您不希望 Table 加载数据。