Blazor QuickGrid：基于行项属性值为单元格添加样式类的问题

要解决PropertyColumn无法直接通过Class参数访问行数据，同时TemplateColumn丢失自动排序的问题，使用CellCssClassProvider是最优方案——它既保留PropertyColumn的自动排序功能，又能给整个单元格应用样式。

实现步骤 #

1. 定义样式判断逻辑
   在组件类中编写方法，根据行数据的属性值返回对应的CSS类名：

   private string GetBirthDateCellClass(GridCellContext<YourModel> context)
   {
       var birthDate = context.Item.BirthDate;
       // 根据业务规则返回样式类
       if (birthDate.AddYears(18) < DateTime.Now)
       {
           return "adult-cell";
       }
       else
       {
           return "minor-cell";
       }
   }
   

2. 给PropertyColumn绑定CellCssClassProvider
   在QuickGrid的PropertyColumn中直接指定CellCssClassProvider参数，传入你的样式判断方法：

   <QuickGrid Items="@yourDataSource">
       <!-- 其他列 -->
       <PropertyColumn 
           Property="@model => model.BirthDate" 
           Title="出生日期"
           CellCssClassProvider="@(context => GetBirthDateCellClass(context))" />
   </QuickGrid>
   

3. 编写对应的CSS样式
   在组件的样式区域或者全局样式文件中定义类：

   .adult-cell {
       background-color: #e8f5e9;
       color: #2e7d32;
   }
   .minor-cell {
       background-color: #fff3e0;
       color: #ef6c00;
   }
   

全局批量处理多个列的样式 #

如果需要给多个列设置样式，也可以直接在QuickGrid上全局配置CellCssClassProvider，通过判断列名来区分：

<QuickGrid 
    Items="@yourDataSource"
    CellCssClassProvider="@(context => 
    {
        switch (context.Column.PropertyName)
        {
            case nameof(YourModel.BirthDate):
                return GetBirthDateCellClass(context);
            case nameof(YourModel.Status):
                return GetStatusCellClass(context);
            default:
                return "";
        }
    })">
    <PropertyColumn Property="@model => model.Name" />
    <PropertyColumn Property="@model => model.BirthDate" />
    <PropertyColumn Property="@model => model.Status" />
</QuickGrid>

方案优势 #

• 完全保留PropertyColumn的自动排序、格式化等原生功能，无需手动实现模板和排序逻辑
• 样式直接作用于整个单元格（而非内部元素），符合需求
• 通过GridCellContext可以直接访问当前行的所有数据属性，灵活度高

内容的提问来源于stack exchange，提问作者Aditya Sharma