如何在MudTable非行内编辑状态下隐藏提交按钮列？

我正在试用MudTable组件，希望在未启用行内编辑（即ReadOnly设为true）时隐藏提交按钮对应的空白列。当前使用默认示例时，最后一列始终空白且会无限延伸，外观较为难看。

问题代码示例 #

<MudTable Items="@Elements" Dense="@dense" Hover="@hover" ReadOnly="@ronly" CanCancelEdit="@canCancelEdit" Filter="new Func<Element,bool>(FilterFunc)"
          @bind-SelectedItem="selectedItem1" SortLabel="Sort By" CommitEditTooltip="Commit Edit"
          OnCommitEditClick="@(() => Snackbar.Add("Commit Edit Handler Invoked"))" RowEditPreview="BackupItem" RowEditCancel="ResetItemToOriginalValues"
          RowEditCommit="ItemHasBeenCommitted" Bordered="@bordered" IsEditRowSwitchingBlocked="@blockSwitch" ApplyButtonPosition="@applyButtonPosition">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
        <MudSpacer />
        <MudTextField @bind-Value="searchString" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    <ColGroup>
    
        <col style="width:50px;" />
        <col style="width:80px;" />
        <col style="width:50%;" />
        <col />
        <col />
        @if (applyButtonPosition.DisplayApplyButtonAtEnd())
        {
            <col style="width:2px;" />
        }
    </ColGroup>
    <HeaderContent>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Number)">Nr</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Sign)">Sign</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<Element, object>(x=>x.Name)">Name</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Position)">Position</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Molar)">Mass</MudTableSortLabel></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
    <RowEditingTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">
            <MudTextField @bind-Value="@context.Sign" Required />
        </MudTd>
        <MudTd DataLabel="Name">
            <MudTextField @bind-Value="@context.Name" Required />
        </MudTd>
        <MudTd DataLabel="Position">
            <MudNumericField @bind-Value="@context.Position" Required Min="1" />
        </MudTd>
        <MudTd DataLabel="Molar mass">
            <MudTextField @bind-Value="@context.Molar" Required />
        </MudTd>
    </RowEditingTemplate>
    <PagerContent>
        <MudTablePager />
    </PagerContent>
</MudTable> 

问题截图 #

解决方案 #

方法1：动态控制列的渲染（推荐） #

修改ColGroup中的判断逻辑，结合ReadOnly状态（即ronly变量），只有当非只读且按钮位置在末尾时才渲染提交按钮列：

<ColGroup>
    <col style="width:50px;" />
    <col style="width:80px;" />
    <col style="width:50%;" />
    <col />
    <col />
    @if (!ronly && applyButtonPosition.DisplayApplyButtonAtEnd())
    {
        <col style="width:120px;" /> <!-- 调整为合适宽度，给提交/取消按钮留出空间 -->
    }
</ColGroup>

这样当表格处于只读状态时，不会渲染额外的空白列，表格布局会自动适配。

方法2：通过CSS隐藏空白列 #

如果不想修改组件结构，可以添加自定义CSS，当表格处于只读状态时隐藏最后一列：

/* 隐藏只读状态下的最后一列单元格和表头 */
.mud-table[readonly] .mud-table-body .mud-table-cell:last-child,
.mud-table[readonly] .mud-table-head .mud-table-cell:last-child {
    display: none;
}

添加这段CSS后，只读状态下的空白列会被隐藏，编辑状态下按钮列正常显示。

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