Blazor UI 数据表列扩展

数据表列扩展系统允许您在用户界面上新增表列。以下示例添加了一个标题为“邮箱已验证”的新列：

您可以使用标准列选项对表列进行精细控制。

注意这是用于精细控制表列的低层级API。若要在表格中显示扩展属性，请参阅 模块实体扩展 文档。

设置方法

创建C#文件

首先，在解决方案中添加新的C#文件。我们在 .Blazor 项目的 /Pages/Identity/ 文件夹内添加：

我们将使用Blazor中的 组件重写系统。创建继承自 UserManagement 组件的类后，我们将重写 SetTableColumnsAsync 方法并以编程方式添加表列。

以下是重写后的 SetTableColumnsAsync 方法内容：

protected override async ValueTask SetTableColumnsAsync()
{
    await base.SetTableColumnsAsync();
    var confirmedColumn = new TableColumn
    {
        Title = "邮箱已验证",
        Data = nameof(IdentityUserDto.EmailConfirmed)
    };
    TableColumns.Get<UserManagement>().Add(confirmedColumn);
}

以下是文件的完整内容：

using System.Threading.Tasks;
using Volo.Abp.AspNetCore.Components.Web.Extensibility.TableColumns;
using Volo.Abp.DependencyInjection;
using Volo.Abp.Identity;
using Volo.Abp.Identity.Blazor.Pages.Identity;

namespace MyCompanyName.MyProjectName.Blazor.Pages.Identity
{
    [ExposeServices(typeof(UserManagement))]
    [Dependency(ReplaceServices = true)]
    public class CustomizedUserManagement : UserManagement
    {
        protected override async ValueTask SetTableColumnsAsync()
        {
            await base.SetTableColumnsAsync();
            var confirmedColumn = new TableColumn
            {
                Title = "邮箱已验证",
                Data = nameof(IdentityUserDto.EmailConfirmed)
            };
            TableColumns.Get<UserManagement>().Add(confirmedColumn);
        }
    }
}

自定义数据表列

本节说明如何使用 TableColumn 类型中的属性自定义数据表列：

• Title: 列标题
• Data: 数据模型中字段名称
• Component: 要渲染的组件类型。详见“在数据表列中渲染自定义组件”章节
• Actions: 列操作列表。通过向此集合添加操作可渲染额外操作列
• ValueConverter: 内容渲染前调用的简易转换函数
• Sortable: 指示列是否可排序的布尔字段
• DisplayFormat: 可为列指定自定义格式
• DisplayFormatProvider: 可为列提供自定义 IFormatProvider，默认值为 CultureInfo.CurrentCulture
• Visible: 指示列是否可见的布尔字段

在数据表列中渲染自定义组件

本节说明如何在数据表列中渲染自定义Blazor组件。本示例将展示用自定义图标替代属性文本显示的方法。

首先创建Blazor组件，我们将其命名为 CustomTableColumn：

添加名为 Data 的对象参数：

public class CustomTableColumn
{
    [Parameter]
    public object Data { get; set; }
}

导航至 razor 文件并粘贴以下代码：

@using System
@using Volo.Abp.Identity

@if (Data.As<IdentityUserDto>().EmailConfirmed)
{
    <Icon class="text-success" Name="IconName.Check" />
}
else
{
    <Icon class="text-danger" Name="IconName.Times" />
}

返回 CustomizedUserManagement 类，使用 Component 属性指定自定义 Blazor 组件：

protected override async ValueTask SetTableColumnsAsync()
{
    await base.SetTableColumnsAsync();
    var confirmedColumn = new TableColumn
    {
        Title = "邮箱已验证",
        Component = typeof(CustomTableColumn)
    };
    TableColumns.Get<UserManagement>().Add(confirmedColumn);
}

运行项目后即可看到图标替代文本字段的显示效果：