Blazor:如何自动对 MudBlazor 表中的行进行编号?

我有一个 ASP.NET Blazor 服务器项目,它使用 MudBlazor 库来创建 HTML table。我的问题是编号。在下面的示例代码中,行的编号是从类属性中检索的。但是,在我的班级中,我没有 number 属性,并且在我打算在表格中显示的所有班级中都有一个数字属性并不好。

由于该表接受项目列表,有没有办法获取正在呈现的项目的索引并使用它而不是 @context.Number 来显示 MudBlazor 表中的行号?

<MudTable 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>
        <MudTd DataLabel="Nr">@context.Number</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>

此示例代码可以在 MudBlazor Table 中找到。

stack overflow Blazor: How to number the rows in MudBlazor table automatically?
原文答案
author avatar

接受的答案

最好使用列表索引,因为它更容易实现以显示表中的行号。

@(Elements.IndexOf(context)+1)

<MudTable Items="@Elements" 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">@(Elements.IndexOf(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>

答案:

作者头像

使用 Linq 的 TakeWhile,您可以计算元素,直到找到与您当前所在行的元素匹配的元素:

<MudTable Items="@MyElements">
    <HeaderContent>
        <MudTh>Row</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@GetRowNumber(context)</MudTd>
    </RowTemplate>
</MudTable>
@code{
    public IEnumerable<object> MyElements => Elements.Take(4);
    public int? GetRowNumber(object element) =>
        MyElements?.TakeWhile(x => x != element).Count();
}
作者头像

好吧,有点粗略但最简单的解决方案是将当前的无数字对象映射到包含所需数字的模型。
创建以下内容:

public class Model<T>
{
    public int Number {get; set;}
    public T Value {get; set;}
}

然后通过您选择的某些属性对您的原始集合进行排序并迭代,每次创建新的 Model 对象,其中包含原始对象的连续编号和值。
使用这个新模型作为表格的显示数据源,一切都会很好。

<MudTd DataLabel="Nr">@context.Number</MudTd>
<MudTd DataLabel="Sign">@context.Sign</MudTd>

会变成

<MudTd DataLabel="Nr">@context.Number</MudTd>
<MudTd DataLabel="Sign">@context.Value.Sign</MudTd>
// etc...

同样,它对眼睛有点粗糙,但会奏效。

作者头像

让我们使用一个计数器变量并为每个行模板递增一个我正在使用的示例:

<RowTemplate>
   <MudTd DataLabel="#">@(rowIndex++)</MudTd>
   ...
 </RowTemplate>

@code{
   private int rowIndex = 1;
}