如何在 Blazor 的可重用表组件中显示数据

Posted

技术标签:

【中文标题】如何在 Blazor 的可重用表组件中显示数据【英文标题】:How to display data in a reusable Table component in Blazor 【发布时间】:2021-06-01 13:35:07 【问题描述】:

我正在尝试在 Blazor 中创建一个可重用的 MasterTable 组件。

到目前为止,我已将 MasterTable 定义为

@using AntDesign
@using MyNamespace.Blazor.ViewModels

@typeparam TItem

<Table TItem="TItem" DataSource="@Data">
    @
        foreach (var col in Columns)
        
            <Column Title="@col.Label" @bind-Field="@col.Key" />
        
    
</Table>

@code


    private List<TItem> _data;
    [Parameter]
    public List<TItem> Data
    
        get => _data;
        set => _data = value ?? new List<TItem>();
    

    [Parameter]
    public TableColumnViewModel[] Columns  get; set; 

其中 TableColumnViewModel 被简单定义为

public class TableColumnViewModel
         
  public string Key  get; set; 
  public string Label  get; set; 

我想在日常任务的页面中创建 MasterTable 的实例,但到目前为止我只能让它显示如下:

我实现MasterTable的尝试如下:

@page "/Tasks/Daily";
@using MyNamespace.Blazor.Services;
@using MyNamespace.Blazor.ViewModels;
@using MyNamespace.Api.Client.Model;

@inject ITasksService _tasksService;

<h1>Daily Tasks</h1>

<MasterTable TItem="TaskStatus" Data="_tasks" Columns="cols">
</MasterTable>

@code 
    private List<TaskStatus> _tasks = new List<TaskStatus>();
    protected override async Task OnInitializedAsync()
    
        _tasks = await _tasksService.GetTaskStatusAsync();
    
    
    TableColumnViewModel[] cols = 
    
        new TableColumnViewModel
        
            Key = "id",
            Label = "ID"
        ,
        new TableColumnViewModel
        
            Key = "description",
            Label = "ID"
        ,
        new c
        
            Key = "type",
            Label = "Type"
        
    ;

TaskStatus 定义为

public class TaskStatus

   
    public TaskStatus(int taskStatusId = default(int), string statusDescription = default(string))
    
        this.TaskStatusId = taskStatusId;
        this.StatusDescription = statusDescription;
    
   
    public int TaskStatusId  get; set;   
    public string StatusDescription  get; set; 

我需要做什么才能让 MasterTable 模板显示 TaskStatus 对象列表而不是 TableColumnViewModel 中的键?

要清楚 - 而不是只使用组件而不包装它,问题是我想在第 3 方组件的上下文中隔离 CSS,以便 只有 必要的 CSS 是已加载。

【问题讨论】:

【参考方案1】:

您似乎从未使用过 Table 组件的 DataSource。对于一个工作示例,您可以查看Creating a DataGrid component in Blazor。

【讨论】:

以上是关于如何在 Blazor 的可重用表组件中显示数据的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Gatsby 中为我的可重用组件返回特定图像?

如何停止 UIPickerView 的可重用性

Magnolia 中的可重用表单组件

如何在 blazor 组件中显示来自后端的自定义引导警报

Blazor Webassembly:如何将组件插入字符串

如何像 Vue 一样从父层向 Blazor 组件随机添加 CSS 属性?