MudBlazor 中针对复杂对象的可扩展行

Question

我有一个

EmployeeModel

，我想将其显示在 MudTable 中。员工有一些标准属性，例如

Name

、

Email

等，还有就业率列表。例如，2022 年 1 月至 6 月期间，员工的 50% 可能受雇，2023 年 5 月至 8 月，80% 的员工受雇，等等。

public class EmployeeModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
    public int EmployeeId { get; set; }
    public IEnumerable<EmployeeEmploymentRateModel>? EmploymentRates { get; set; }
}

public class EmployeeEmploymentRateModel
{
    public int Id { get; set; }
    public decimal RatePercentage { get; set; }
    public string FromDateInclusive { get; set; }
    public string ToDateInclusive { get; set; }
}

我想要实现的是让表的每一行显示姓名、电子邮件、开始日期、结束日期和员工 ID，然后使该行可扩展以显示包含就业率的一组新行（或新表）对于该员工。目前该表看起来像这样 基本上我想要发生的是每一行都应该是可点击的并扩展到就业率列表。我尝试过使用 MudBlazor 的分组功能，但这会在根级别创建一个组，因此我首先必须展开一次才能显示名称、电子邮件等。MudBlazor 中有没有一种方法可以为复杂对象创建嵌套的可扩展表包含列表？

Answer 1

您可以通过在表格中使用

ChildRowContent

来完成此操作。使用

EmployeeModel

 等属性扩展您的 

ShowDetails

public class EmployeeModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
    public int EmployeeId { get; set; }
    public bool ShowDetails {get; set;}
    public IEnumerable<EmployeeEmploymentRateModel>? EmploymentRates { get; set; }
}

在第一列中添加 MudButton 或 MudToggleButton 以切换其状态

<RowTemplate>
    <MudTd><MudButton Variant="Variant.Outlined" Size="Size.Small" OnClick="@(() => Toggle(context.Id))">@((context.ShowDetails == true)? "Hide" : "Show") Rates</MudButton></MudTd>
    <MudTd DataLabel="Name">@context.Name</MudTd>
    <MudTd DataLabel="Email">@context.Email</MudTd>
    <MudTd DataLabel="Startdate">@context.StartDate</MudTd>
</RowTemplate>

并相应地显示 ChildRowContent

<ChildRowContent>
    @if (context.ShowDetails)
    {
        <MudTr>
            <td colspan="4">
                <MudCard Elevation="0">
                    <MudCardHeader>
                        <CardHeaderContent>
                            <MudText Typo="Typo.body1">Rates for <strong>@context.Name</strong></MudText>
                        </CardHeaderContent>
                    </MudCardHeader>
                    <MudCardContent Class="pa-0">
                        <MudTable Items="@context.EmploymentRates" Context="RateContext" Hover="true" Breakpoint="Breakpoint.Sm" Elevation="0">
                            <ColGroup>
                                <col />
                                <col />
                                <col style="width:200px;" />
                            </ColGroup>
                        <HeaderContent>
                            <MudTh>Rate</MudTh>
                            <MudTh>From</MudTh>
                            <MudTh>To</MudTh>
                        </HeaderContent>
                            <RowTemplate>
                                <MudTd DataLabel="Rate">@RateContext.RatePercentage</MudTd>
                                <MudTd DataLabel="From">@RateContext.FromDateInclusive</MudTd>
                                <MudTd DataLabel="To">@RateContext.ToDateInclusive</MudTd>
                            </RowTemplate>
                        </MudTable>
                    </MudCardContent>
                </MudCard>
            </td>
        </MudTr>
    }
</ChildRowContent>

MudBlazor 文档中有一个示例：带有相关数据的表 或者，您也可以使用带有可扩展行的 Mudblazors DataGrid：row-detail-view