如何设置蚂蚁设计blazor表的背景颜色行

Question

我正在使用我的项目用于ant design blazor表，任何人都知道如何为ant design blazor表行添加背景色，

此处的代码

@using System.ComponentModel
@using AntDesign.TableModels
<Table TItem="Data" DataSource="@data" OnRowClick="OnRowClick">
<Column @bind-Field="@context.Name">
<a>@context.Name</a>
</Column>
<Column @bind-Field="@context.Age"></Column>
<Column @bind-Field="@context.Address">
<TitleTemplate>
<span> <Icon Type="environment" /> Address </span>
</TitleTemplate>
</Column>
<Column @bind-Field="@context.Tags">
@foreach (var tag in context.Tags)
{
var color = tag.Length > 5 ? "geekblue" : "green";
if (tag == "loser")
{
color = "volcano";
}
<Tag Color="@color">@tag</Tag>
}
</Column>
<ActionColumn Title="Action">
<Space Size=@("middle")>
<SpaceItem>
<a>Invite @context.Name</a>
</SpaceItem>
<SpaceItem>
<a>Delete</a>
</SpaceItem>
</Space>
</ActionColumn>
</Table>
@code{
Data[] data = new Data[]
{
new()
{
Key = "1",
Name = "John Brown",
Age = 32,
Address = "New York No. 1 Lake Park",
Tags = new[] {"nice", "developer"}
},
new()
{
Key = "2",
Name = "Jim Green",
Age = 42,
Address = "London No. 1 Lake Park",
Tags = new[] { "loser"}
},
new()
{
Key = "3",
Name = "Joe Black",
Age = 32,
Address = "Sidney No. 1 Lake Park",
Tags = new[] { "cool", "teacher" }
}
};
public class Data
{
[DisplayName("Key")]
public string Key { get; set; }
[DisplayName("Name")]
public string Name { get; set; }
[DisplayName("Age")]
public int Age { get; set; }
[DisplayName("Address")]
public string Address { get; set; }
[DisplayName("Tags")]
public string[] Tags { get; set; }
}
void OnRowClick(RowData<Data> row)
{
Console.WriteLine($"row {row.Data.Key} was clicked.");
}
}

Answer 1

我能想到的最简单的方法是在Antd-blazor表组件中添加一个RowClassName道具，然后为表格的每一行添加样式。

您可以通过两种方式在表的行中添加className。

1. 内联类名

<Table RowClassName="@(_=>"classname-for-row"> </Table>
<style> 
.classname-for-row {
background-color: blue;
} 
</style>
// -----------------------------------------------------------

2. 当您想根据某些条件为不同的行添加类名时

<Table RowClassName="@(row => row.Data.RowClass"> </Table>
@code {
public class Data
{
[DisplayName("Score")]
public int Score { get; set; }
public string RowClass => Score < 70 ? "danger" : "success";
}
}
<style> 
.danger {
background-color: red;
}
.success {
background-color: green:
}
</style>
//-------------------------------------------------

请记住，以上展示/示例都是人为设计的。

以下是为Antd-blazor表中的每一行添加背景色的完整示例。

@using System.ComponentModel
@using AntDesign.TableModels
<Table TItem="Data" DataSource="@data" RowClassName="@(_=>"row-background")">
<Column @bind-Field="@context.Name">
<a>@context.Name</a>
</Column>
<Column @bind-Field="@context.Score"></Column>
</Table>
<style>
.row-background{
background-color: #fff1f0;
}
</style>
@code{
Data[] data = new Data[]
{
new()
{
Key = "1",
Name = "John Brown",
Score = 95,
},
new()
{
Key = "2",
Name = "Jim Green",
Score = 87,
}
};
public class Data
{
[DisplayName("Key")]
public string Key { get; set; }
[DisplayName("Name")]
public string Name { get; set; }
[DisplayName("Score")]
public int Score { get; set; }
}
}