Blazor：如何在MudBlazor表格中自动生成行序号？

解决方案 #

有两种无需修改原有实体类的实现方式，按需选择即可：

方法1：数据源投影（无需依赖表格实例） #

利用Linq的Select重载获取元素索引，生成带行号的匿名类型投影，不影响原实体类结构。

<MudTable Items="@Elements.Take(4).Select((item, idx) => new { RowNum = idx + 1, Data = item })" 
          Hover="true" 
          Breakpoint="Breakpoint.Sm" 
          Loading="@_loading" 
          LoadingProgressColor="Color.Info">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.RowNum</MudTd>
        <MudTd DataLabel="Sign">@context.Data.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Data.Name</MudTd>
        <MudTd DataLabel="Position" HideSmall="_hidePosition">@context.Data.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Data.Molar</MudTd>
    </RowTemplate>
</MudTable>

<MudSwitch @bind-Checked="_hidePosition">Hide <b>position</b> when Breakpoint=Xs</MudSwitch>
<MudSwitch @bind-Checked="_loading">Show Loading</MudSwitch>

方法2：调用MudTable原生方法（更简洁） #

MudTable自带GetRowIndex方法，可以直接获取当前渲染项的索引，无需修改绑定的数据源。

<MudTable @ref="_mudTableRef" 
          Items="@Elements.Take(4)" 
          Hover="true" 
          Breakpoint="Breakpoint.Sm" 
          Loading="@_loading" 
          LoadingProgressColor="Color.Info">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <!-- 索引从0开始，+1转换为自然行号 -->
        <MudTd DataLabel="Nr">@(_mudTableRef.GetRowIndex(context) + 1)</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position" HideSmall="_hidePosition">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
</MudTable>

<MudSwitch @bind-Checked="_hidePosition">Hide <b>position</b> when Breakpoint=Xs</MudSwitch>
<MudSwitch @bind-Checked="_loading">Show Loading</MudSwitch>

@code {
    // 声明MudTable实例引用，泛型参数替换为你自己的实体类类型即可
    private MudTable<Element> _mudTableRef;
    private bool _hidePosition;
    private bool _loading;
    private List<Element> Elements = new();
}

分页场景注意事项 #

如果表格开启了分页功能：

• 方法1需要手动计算分页偏移，行号公式为：索引 + 1 + (当前页码 - 1) * 每页展示条数
• 方法2原生适配分页逻辑，返回的就是当前页的自然行号，无需额外调整。

内容的提问来源于stack exchange，提问作者Ibrahim Timimi