我希望默认情况下能够隐藏标记为删除的行项目,并在切换开关启用时以红色显示它们。因此,在我的组件上附加了一个切换开关:
<MudSwitch @bind-Checked="@blnShowDeleted" Color="Color.Warning">Show deleted</MudSwitch>
@Nadav Hury的回答告诉了我RowStyleFunc,这让我想到了MudBlazor文档中的RowClassFunc可能是更好的选择。于是我改变了表格声明的代码:
<MudTable Items="objVmCustomers" RowClassFunc="ShowDeleted">
我在后端的razor.cs类中创建了一个ShowDeleted方法:
public string ShowDeleted(VmCustomer objVmCustomer, int index)
{
if(objVmCustomer.dtDeleted != null)
{
if (blnShowDeleted == true)
{
return "show-deleted";
}
return "hide-deleted";
}
return "";
}
然后我创建了两个CSS类来适应上面的代码:
.show-deleted td { --mud-palette-text-primary: red; }
.hide-deleted { display: none; visibility: collapse; }
这里有一个需要注意的地方:你不能仅仅在
show-deleted声明中使用
color:red;,因为CSS变量
--mud-palette-text-primary会覆盖它。你必须覆盖CSS变量(我通过检查元素发现了这一点)。
通过使用作用于行内所有TD元素的CSS类,可以解决@T0bi在使用多个
style属性时所抱怨的“肮脏”问题。