我正在试验MudTable组件,我想知道在不使用内联编辑时是否有一种隐藏提交按钮列的方法。目前,我使用的是默认的示例,它看起来像是最后一列将永远继续下去,看起来有点难看。供参考的例子:
<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>
发布于 2022-10-04 08:57:41
您可以使用以下css完成此操作:
::deep .mud-table-bordered .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:nth-last-child(2) {
border-right: none;
}
我假设您使用的是CSS隔离,但如果不使用,则删除::deep
。
https://stackoverflow.com/questions/73944659
复制相似问题