blazor - 如何设置ant design blazor表格的行背景颜色

Question

我正在使用我的项目 ant design blazor table ，有人知道如何为 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 Table 组件中添加一个 RowClassName 属性， 然后为表格的每一行添加样式。

您可以通过两种方式在表格行中添加类名。

1. 内联类名

<Table RowClassName="@(_=>"classname-for-row"> </Table>

<style> 
  .classname-for-row {
     background-color: blue;
  } 
</style>
// -----------------------------------------------------------

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

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