Blazor QuickGrid启用Virtualize时如何添加行计数器

方案一：前端计算行号（推荐，无需修改后端） #

核心思路是利用QuickGrid虚拟滚动组件提供的FirstItemIndex（当前可视批次的第一个项在整个数据集的索引），结合当前项在可视批次内的索引，计算出全局行号。

代码示例 #

<QuickGrid @ref="quickGridRef" 
           Items="@FilteredUsers" 
           TotalItemCount="@totalcount" 
           Virtualize="true">
    <!-- 行号列 -->
    <Column Title="行号" Width="60px">
        <Template Context="user">
            @{
                // 获取当前项在可视批次中的索引
                var batchIndex = quickGridRef?.VirtualizeComponent?.Items.IndexOf(user) ?? 0;
                // 计算行号：批次起始索引 + 批次内索引 + 1（从1开始计数）
                var rowNumber = (quickGridRef?.VirtualizeComponent?.FirstItemIndex ?? 0) + batchIndex + 1;
            }
            @rowNumber
        </Template>
    </Column>
    <!-- 其他业务列 -->
    <PropertyColumn Property="u => u.UserName" Title="用户名" />
    <PropertyColumn Property="u => u.Email" Title="邮箱" />
</QuickGrid>

@code {
    private QuickGrid<ApplicationUser>? quickGridRef;
    private IQueryable<ApplicationUser> FilteredUsers { get; set; }
    private int totalcount { get; set; }

    // 首次渲染后触发状态更新，确保VirtualizeComponent已初始化
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            StateHasChanged();
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

注意事项 #

• VirtualizeComponent是QuickGrid内部的虚拟滚动组件，需通过组件引用@ref获取
• 行号从1开始计数，若需要从0开始可去掉+1
• 过滤、排序后，FirstItemIndex会自动对应数据集的正确位置，行号始终准确

方案二：后端投影行号（适合精确行号场景） #

如果需要后端计算全局行号（比如导出数据时保持行号一致），可通过EF Core的RowNumber()函数在查询时添加行号字段。

代码示例 #

// 先确保过滤后的数据集已排序（RowNumber必须依赖排序条件）
var sortedFilteredUsers = FilteredUsers.OrderBy(u => u.UserName);

// 投影带行号的匿名对象（或自定义DTO）
var usersWithRowNumber = sortedFilteredUsers.Select(u => new 
{
    RowNumber = EF.Functions.RowNumber().Over(OrderBy(u => u.UserName)),
    UserId = u.Id,
    UserName = u.UserName,
    Email = u.Email
});

// 将usersWithRowNumber作为QuickGrid的Items数据源

注意事项 #

• 必须先对FilteredUsers进行排序，否则RowNumber()无法生成正确的行号
• 若使用DTO，需创建包含行号和用户字段的实体类，替代匿名对象
• 此方案会将行号逻辑转移到数据库查询，适合对行号准确性要求极高的场景

内容的提问来源于stack exchange，提问作者Brett JB