4

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

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

4 回答 4

5

你可以：

<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";

    }
}
于 2021-10-31T12:03:24.010 回答
1

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

<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; }

这里有个问题：你不能只用color:red; 在show-deleted声明中，因为 CSS 变量--mud-palette-text-primary将覆盖它。您必须覆盖 CSS 变量（我通过检查元素发现了这一点）。

通过使用对一行中的所有 TD 元素进行操作的 CSS 类，这克服了@T0bi 在使用多个样式属性时抱怨的“肮脏”。

于 2021-11-26T14:09:49.763 回答
0

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

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

于 2021-08-03T21:59:27.407 回答
0

我有一个解决方案，但感觉有点脏......

<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>

如图所示，可以更改行模板内的颜色。所以上下文是可用的。它对每一行/列组合的烦人的工作，但最终它工作。

于 2021-08-04T08:42:19.237 回答