按行项条件更改 MudBlazor 表格背景颜色

Posted

技术标签:

【中文标题】按行项条件更改 MudBlazor 表格背景颜色【英文标题】:Change MudBlazor table background color by row item condition 【发布时间】:2021-10-08 19:23:43 【问题描述】:

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

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

【问题讨论】:

【参考方案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";

    

【讨论】:

【参考方案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 属性时所抱怨的“肮脏”。

【讨论】:

您究竟会在哪里包含 CSS 的两个类? app.css? 我将其作为一个小实验进行,因此我将其添加到 site.css 文件的末尾。如果要进入组件,最好放在代码隐藏的 css 文件中。【参考方案3】:

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

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

【讨论】:

【参考方案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>

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

【讨论】:

以上是关于按行项条件更改 MudBlazor 表格背景颜色的主要内容,如果未能解决你的问题,请参考以下文章

更改 MudBlazor 图表的外观

pb数据窗中中如何按行的条件设置行的颜色

jsp 更改表格某行背景颜色。

用Word制作表格,如何更改表格背景色

iOS Swift - 如何更改表格视图的背景颜色?

iOS UITableView:更改表格的背景颜色会覆盖单元格的背景颜色