根据行项目条件更改MudBlazor表的背景颜色

Question

我正在尝试更改mudblazor表格中一行的颜色。问题是，我无法添加根据行元素的条件更改颜色的功能。

 <MudTable Items="@context.orderPositions" Context="AddressContext" Hover="true" Breakpoint="Breakpoint.Sm" Elevation="0" Style="background-color: @(AddressContext.OrderPositionStatus == PositionStatus.rdy ? yellowgreen : blue;">

- T0bi

Answer 1

你可以：

<MudTable Items="@Items" Hover="true" RowStyleFunc="RowStyleFunc">

然后

private string RowStyleFunc(Item arg1, int index)
{
    switch (arg1.Title)
    {
        case string a when a.Contains("1/4"):
            return "background-color:blue";
        case string b when b.Contains("2/4"):
            return "background-color:red";          
        default: return "background-color:white";

    }
}

- Nadav Hury

Answer 2

我希望默认情况下能够隐藏标记为删除的行项目，并在切换开关启用时以红色显示它们。因此，在我的组件上附加了一个切换开关：

<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属性时所抱怨的“肮脏”问题。

- CrispinH

---

你会把这两个类放在哪里，以便在CSS中使用？是在app.css文件中吗？ - user3297833

我之前只是在做一个小实验，所以把它添加到了 site.css 文件的末尾。如果要放到组件中，最好还是放在代码后台的 css 文件中。 - CrispinH

Answer 3

这不是一个完整的答案，但在你的代码中，<MudTable> 中的样式将改变所有背景颜色。你需要确定 RenderFragment 的颜色，例如：<MudTd Style="background-color:yellow;</MudTd>"

https://try.mudblazor.com/snippet/cYcFEMkdVtcQQNnQ

- Mehmet Can Karagöz

Answer 4

我有一个解决方案，但感觉有点不太好...

<RowTemplate>
                                    <MudTd DataLabel="Menge" Style="@(AddressContext.OrderPositionStatus == PositionStatus.rdy ? $"background:{Colors.BlueGrey.Darken4};" : $"background:{Colors.Cyan.Darken1};")">@AddressContext.orderItem.ItemQuantity</MudTd>
                                    <MudTd DataLabel="Itemcode" Style="@(AddressContext.OrderPositionStatus == PositionStatus.rdy ? $"background:{Colors.BlueGrey.Darken4};" : $"background:{Colors.Cyan.Darken1};")">@AddressContext.orderItem.ItemCode</MudTd>
                                    <MudTd DataLabel="Itemname" Style="@(AddressContext.OrderPositionStatus == PositionStatus.rdy ? $"background:{Colors.BlueGrey.Darken4};" : $"background:{Colors.Cyan.Darken1};")">@AddressContext.orderItem.ItemName</MudTd>
                                </RowTemplate>

如下所示，可以在行模板内更改颜色。因此上下文是可用的。对于每个行/列组合来说，这是繁琐的工作，但最终它能够起作用。

- T0bi