MudBlazor 表 colspan 和 rowspan 未按预期工作

Question

我正在使用 MudBlazor 表制作年假卡。要了解该表应该是什么样子，我首先在 HTML 中重新创建了它：https://try.mudblazor.com/snippet/mYcIOeOJwSipfSsI

将相同的逻辑应用于 MudBlazor 表，我最终得到的结果是没有扩展表的正确长度。 https://try.mudblazor.com/snippet/mkmyuoafGJdNgvIY

如有任何帮助，我们将不胜感激。

Answer 1

我猜当您跨两行跨越单元格时，

MudTHeadRow

无法正常工作，即

rowspan

。

决定在需要拆分的列上使用

colspan

，然后添加css来创建自己的网格以适合该列。

<style>
    .my-custom-row{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .top-row{
        grid-column: 1/3;
    }
    .bottom-row{
        border-bottom:0;
    }
</style>

<MudTable Items="@Events" Dense="true" Hover="true" Bordered="true" CanCancelEdit="true" IsEditRowSwitchingBlocked="true"
          RowEditPreview="SetBackupItem" RowEditCancel="ResetItemToOriginalValues" RowEditCommit="ItemHasBeenCommitted" 
          ApplyButtonPosition="TableApplyButtonPosition.End" EditButtonPosition="TableEditButtonPosition.End" EditTrigger="TableEditTrigger.EditButton" HeaderClass="table-head-bordered">
    <HeaderContent>
            <MudTh >FROM</MudTh>
            <MudTh >TO</MudTh>
            <MudTh >NO OF DAYS/HRS REQUESTED</MudTh>
            <MudTh colspan="2" Style="color:green;padding:0;">
                <tr class="my-custom-row">
                    <th class="top-row mud-table-cell">
                        NO OF DAYS/HRS REMAINING
                    </th>
                    <th class="bottom-row mud-table-cell">
                        .
                    </th>
                    <th class="bottom-row mud-table-cell">
                        LSA
                    </th>
                </tr>
            </MudTh>
            <MudTh>CONFIRMED</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.From.ToShortDateString()</MudTd>
        <MudTd DataLabel="Sign">@context.To.ToShortDateString()</MudTd>
        <MudTd DataLabel="Name">@context.TimeRequested</MudTd>
        <MudTd DataLabel="Position">@context.TimeRemaining</MudTd>
        <MudTd DataLabel="Position">@context.TimeRemaining</MudTd>
        <MudTd DataLabel="Molar mass">@context.IsConfirmed</MudTd>
    </RowTemplate>
    <RowEditingTemplate>
        <MudTd DataLabel="Sign">
            <MudTextField @bind-Value="@context.From" Required />
        </MudTd>
        <MudTd DataLabel="Name">
            <MudTextField @bind-Value="@context.To" Required />
        </MudTd>
      
    </RowEditingTemplate>

    <EditButtonContent Context="button">
        <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" Class="pa-0" OnClick="@button.ButtonAction" Disabled="@button.ButtonDisabled" />
    </EditButtonContent>
</MudTable>

演示 👉 MudBlazor 片段](https://try.mudblazor.com/snippet/GYQoYyuqhueYeasO)