如何在MudBlazor中为复杂对象实现可展开表格行

问题 #

我有一个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; }
}

我希望表格每行展示员工的Name、Email、StartDate、EndDate和EmployeeId，点击该行可展开显示对应的雇佣费率列表（或子表格）。我曾尝试MudBlazor的分组功能，但它会在根层级创建分组，需先展开才能看到员工基础信息。请问如何在MudBlazor中为含列表的复杂对象创建嵌套可展开表格？

解决方案 #

不需要使用分组功能，直接利用MudTable的DetailTemplate配合RowTemplate就能实现点击行展开子表格的需求，主行直接展示员工基础信息，点击后展开的区域显示雇佣费率列表。

完整实现代码 #

<MudTable T="EmployeeModel" Items="@Employees" HarnessKeyGetter="emp => emp.Id" ClickToExpand="true" ShowExpandIcon="true">
    <HeaderContent>
        <MudTh>姓名</MudTh>
        <MudTh>邮箱</MudTh>
        <MudTh>入职日期</MudTh>
        <MudTh>离职日期</MudTh>
        <MudTh>员工ID</MudTh>
    </HeaderContent>
    <RowTemplate Context="employee">
        <MudTd>@employee.Name</MudTd>
        <MudTd>@employee.Email</MudTd>
        <MudTd>@employee.StartDate?.ToShortDateString()</MudTd>
        <MudTd>@employee.EndDate?.ToShortDateString()</MudTd>
        <MudTd>@employee.EmployeeId</MudTd>
    </RowTemplate>
    <DetailTemplate Context="employee">
        <MudCard Style="margin: 16px;">
            <MudTable T="EmployeeEmploymentRateModel" Items="@employee.EmploymentRates" Bordered="true" Hover="true" Size="Size.Small">
                <HeaderContent>
                    <MudTh>费率ID</MudTh>
                    <MudTh>雇佣占比(%)</MudTh>
                    <MudTh>开始日期</MudTh>
                    <MudTh>结束日期</MudTh>
                </HeaderContent>
                <RowTemplate Context="rate">
                    <MudTd>@rate.Id</MudTd>
                    <MudTd>@rate.RatePercentage</MudTd>
                    <MudTd>@rate.FromDateInclusive</MudTd>
                    <MudTd>@rate.ToDateInclusive</MudTd>
                </RowTemplate>
                <NoRecordsContent>
                    <MudText>无雇佣费率记录</MudText>
                </NoRecordsContent>
            </MudTable>
        </MudCard>
    </DetailTemplate>
    <NoRecordsContent>
        <MudText>无员工数据</MudText>
    </NoRecordsContent>
</MudTable>

@code {
    private List<EmployeeModel> Employees = new List<EmployeeModel>
    {
        new EmployeeModel
        {
            Id = 1,
            Name = "张三",
            Email = "zhangsan@example.com",
            StartDate = new DateTime(2022, 1, 1),
            EndDate = null,
            EmployeeId = 1001,
            EmploymentRates = new List<EmployeeEmploymentRateModel>
            {
                new EmployeeEmploymentRateModel { Id = 101, RatePercentage = 50, FromDateInclusive = "2022-01-01", ToDateInclusive = "2022-06-30" },
                new EmployeeEmploymentRateModel { Id = 102, RatePercentage = 80, FromDateInclusive = "2023-05-01", ToDateInclusive = "2023-08-31" }
            }
        },
        new EmployeeModel
        {
            Id = 2,
            Name = "李四",
            Email = "lisi@example.com",
            StartDate = new DateTime(2021, 3, 15),
            EndDate = new DateTime(2023, 12, 31),
            EmployeeId = 1002,
            EmploymentRates = new List<EmployeeEmploymentRateModel>
            {
                new EmployeeEmploymentRateModel { Id = 201, RatePercentage = 100, FromDateInclusive = "2021-03-15", ToDateInclusive = "2023-12-31" }
            }
        }
    };
}

关键说明 #

1. 展开触发方式：ClickToExpand="true"允许点击整行展开详情，ShowExpandIcon="true"显示单独的展开/折叠图标，可根据需求选择启用其中一种或同时启用。
2. 唯一标识：HarnessKeyGetter="emp => emp.Id"为每个员工设置唯一键，确保数据更新时展开状态不会混乱。
3. 子表格布局：DetailTemplate中嵌套的MudTable用来展示雇佣费率，通过Size="Size.Small"让子表格更紧凑，Bordered="true"增强可读性，用MudCard包裹子表格提升视觉层次。
4. 无数据处理：通过NoRecordsContent分别处理主表格和子表格的空数据场景，提升用户体验。

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