MudBlazor：如何使用colspan和rowspan基于MudTable创建自定义表格

问题根源 #

你当前写法的错误原因是：MudTable默认的RowTemplate会为每个绑定的Item生成单独的<tr>标签，你在RowTemplate内部循环参数生成多个<td>，会导致单个<tr>内的列数远超表头定义的5列，自然出现布局错位。 #

修复后代码 #

<MudTable Class="mt-5"
          Dense="true" Hover="true" Bordered="true" Striped="true" ReadOnly="@dronly" CanCancelEdit="true"
          RowEditPreview="BackupActionItem"
          RowEditCancel="ResetActionItemToOriginalValues"
          RowEditCommit="ActionItemHasBeenCommitted"
          CustomHeader="true"
          CustomBody="true"
          @ref="actionTable">
    <HeaderContent>
        <MudTHeadRow>
            <MudTh>No.</MudTh>
            <MudTh>Action</MudTh>
            <MudTh colspan="2">Parameters</MudTh>
            <MudTh>Return Type</MudTh>
        </MudTHeadRow>
    </HeaderContent>
    <BodyContent>
        @foreach (var action in selectedDriver.Capability.cActions)
        {
            var paramCount = action.Parameters.Count();
            // 遍历当前Action的所有参数，每行对应一个参数
            @foreach (var (param, index) in action.Parameters.Select((p, i) => (p, i)))
            {
                <MudTr>
                    @if (index == 0)
                    {
                        <MudTd rowspan="@paramCount" scope="row" DataLabel="No.">*</MudTd>
                        <MudTd rowspan="@paramCount" scope="row" DataLabel="Action">@action.Name</MudTd>
                    }
                    <MudTd DataLabel="Parameter">@param.Name</MudTd>
                    <MudTd DataLabel="Type">@param.Type.ToString()</MudTd>
                    @if (index == 0)
                    {
                        <MudTd rowspan="@paramCount" scope="row" DataLabel="Return Type">@action.ReturnType.ToString()</MudTd>
                    }
                </MudTr>
            }
        }
    </BodyContent>
</MudTable>

核心改动说明 #

• 新增CustomBody="true"配置，禁用MudTable默认的逐行渲染逻辑，允许完全自定义表体内容
• 两层循环实现跨行效果：外层遍历所有Action，内层遍历每个Action的参数，每个参数单独生成一行<MudTr>
• 仅在同一Action的第一个参数行渲染带rowspan属性的No.、Action、Return Type列，后续行仅渲染参数相关的两列，保证每行的列数和表头完全匹配，避免布局错位
• MudTd原生支持rowspan/colspan属性，无需额外配置即可生效

如果需要保留原有的行编辑功能，只需要将对应的编辑事件绑定到手动生成的<MudTr>上即可，逻辑和原有写法一致。 #

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