Blazor MudTable RowTemplate：为每个数据绑定项创建两行

完全可以通过<RowTemplate>实现这种需求，核心思路是在模板里为每个数据项渲染两行<tr>元素：第一行用colspan属性跨占所有列，展示Property1；第二行对应渲染Property2、Property3、Property4这三列。

示例代码 #

<MudTable Items="@data" Hover="true" Bordered="true">
    <HeaderContent>
        <MudTh>Property 1</MudTh>
        <MudTh>Property 2</MudTh>
        <MudTh>Property 3</MudTh>
        <MudTh>Property 4</MudTh>
    </HeaderContent>
    <RowTemplate>
        <!-- 第一行：跨列展示Property1 -->
        <tr>
            <td colspan="4" class="pa-3">@context.Property1</td>
        </tr>
        <!-- 第二行：展示剩余三个属性 -->
        <tr>
            <td></td> <!-- 对应表头的Property1列，留空对齐 -->
            <td>@context.Property2</td>
            <td>@context.Property3</td>
            <td>@context.Property4</td>
        </tr>
    </RowTemplate>
</MudTable>

@code {
    private List<DataItem> data = new List<DataItem>
    {
        new DataItem { Property1 = "Item 1 - Main Content", Property2 = "Sub 1-2", Property3 = "Sub 1-3", Property4 = "Sub 1-4" },
        new DataItem { Property1 = "Item 2 - Main Content", Property2 = "Sub 2-2", Property3 = "Sub 2-3", Property4 = "Sub 2-4" }
    };

    public class DataItem
    {
        public string Property1 { get; set; }
        public string Property2 { get; set; }
        public string Property3 { get; set; }
        public string Property4 { get; set; }
    }
}

关键说明 #

• 第一行的<td>通过colspan="4"（对应表头列数）实现跨列，占满整行显示Property1内容。
• 第二行第一列留空，对齐表头的Property1列，后续列分别绑定对应属性值。
• 可通过自定义CSS类（如示例中的pa-3）调整行内边距，优化显示样式。

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