logo
为了能更好地了解您的商业使用需求,请参与 Ant Design Blazor 商业应用调查,一起建设商业应用社区,为企业系统研发赋能!

RelationColumnTable 关联列

Table 关联数据自动加载功能,解决 N+1 查询问题。

何时使用

  • 当表格中某列需要显示关联数据(如通过用户ID显示用户名)时
  • 当需要批量加载关联数据以避免 N+1 查询问题时
  • 当需要在多个表格间共享关联数据缓存时
  • 当需要灵活控制关联数据的加载和渲染逻辑时

功能特性

  • 批量加载: 自动收集所有需要加载的关联ID,一次性批量加载,避免 N+1 查询
  • 自动去重: 智能去重,相同ID只加载一次
  • 零反射: 使用委托方式访问字段值,性能最优
  • 共享缓存: 支持跨表格共享关联数据缓存
  • 三种用法: 支持 C# 类、Razor 组件、特性标注三种开发方式

使用方式

方式1: C# 类继承 RelationComponentBase

创建一个类继承 RelationComponentBase<TItem, TData>:

public class UserNameRelation : RelationComponentBase<Order, int>
{
    protected override Task OnLoadBatch(IEnumerable<int> userIds)
    {
        // 批量加载用户数据
        return Task.CompletedTask;
    }
    
    protected override RenderFragment RenderContent(int userId, Order order)
    {
        // 渲染内容
        return builder => builder.AddContent(0, "用户名");
    }
}

在 Table 中使用:

<PropertyColumn Property="c=>c.UserId" Title="用户">
    <UserNameRelation />
</PropertyColumn>

方式2: Razor 组件

创建 Razor 文件继承 RelationComponentBase<TItem, TData>:

@inherits RelationComponentBase<Employee, int>

@if (departments.TryGetValue(CurrentFieldValue, out var dept))
{
    <Tag>@dept.Name</Tag>
}

@code {
    protected override Task OnLoadBatch(IEnumerable<int> ids) 
    { 
        return Task.CompletedTask; 
    }
}

方式3: 特性标注

在实体类属性上添加 [RelationColumn] 特性:

public class Product
{
    [RelationColumn(typeof(CategoryNameRelation))]
    public int CategoryId { get; set; }
}

Examples

演示如何使用共享的 Razor 关联组件,这些组件支持泛型 TItem,可以在不同类型的表格中复用。

在这个例子中,我们展示了两个表格都使用同一个 UserNameRelation 组件,但 TItem 类型不同:

  • 订单表使用 UserNameRelation<Order> 显示用户信息
  • 员工表使用 UserNameRelation<Employee> 显示部门信息

核心特性:

  • 组件可复用性:同一个组件可以在不同 TItem 类型中使用
  • 批量加载避免 N+1 查询
  • 自动去重,只加载需要的关联数据
  • 零反射字段访问
expand code expand code

演示如何在虚拟化表格中使用关联列,通过 UserNameRelation 组件实现用户信息的批量异步加载与缓存。

核心特性:

  • 支持表格虚拟化,提升大数据量渲染性能
  • 通过 UserNameRelation 组件实现关联字段的批量加载和缓存
  • 仅对未缓存的 id 进行数据请求,避免重复加载
  • 组件可复用性,支持泛型 TItem
expand code expand code

演示使用 [RelationColumn] 特性标注的声明式方式。

这种方式最简洁,适合简单的关联数据显示场景。只需在属性上添加特性,Table会自动创建关联组件。

特点:

  • 声明式配置,代码最简洁
  • 无需手动添加组件
  • 适合简单的文本显示场景
expand code expand code

演示多个列如何共用一次加载的数据,并支持分页功能。

在这个示例中,我们展示了一次加载用户数据,然后在多个列中显示用户的不同字段(姓名、地址、邮箱)。这避免了重复加载相同的数据,提高了性能。表格支持分页,总共包含 50 条订单记录。

关键特性:

  • 数据共享:多个列共用一次数据加载
  • 性能优化:避免重复加载相同数据
  • 灵活显示:根据列需求显示不同字段
  • 分页支持:支持前端分页,每页显示 10 条记录
  • 加载状态:切换页面时显示加载动画
expand code expand code

API#

RelationComponentBase<TItem, TData>

属性 说明 类型 默认值
CurrentRowData (Razor组件专用) 当前行数据 TItem -
CurrentFieldValue (Razor组件专用) 当前字段值 TData -
方法 说明 参数 返回值
OnLoadBatch 批量加载关联数据(简化版) IEnumerable<TData> fieldValues Task
OnLoadBatch 批量加载关联数据(完整版) IEnumerable<TItem> items, QueryModel queryModel Task
RenderContent 渲染单元格内容 TData fieldValue, TItem item RenderFragment
GetFieldValue 获取指定行的字段值 TItem item TData

RelationColumnAttribute

属性 说明 类型 默认值
ComponentType 关联组件类型 Type -
Parameters 组件参数(可选) string[] null

性能优化

  1. 批量加载: 所有关联组件的数据加载会在表格数据加载完成后统一触发,使用 Task.WhenAll 并行执行
  2. 自动去重: 框架会自动去重相同的关联ID,避免重复加载
  3. 零反射: 使用编译时生成的委托访问字段值,无反射开销
  4. 共享缓存: 通过 RelationCache 参数可以在多个表格间共享缓存

注意事项

  • OnLoadBatch 方法会在表格数据加载后自动调用,无需手动触发
  • Razor 组件方式不需要重写 RenderContent 方法,直接在 Razor 文件中编写 UI
  • 特性标注方式最简洁,但功能相对有限,适合简单场景
  • 建议将关联数据缓存到组件的字段中,避免重复加载
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.