如何在 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 的可重用表组件中显示数据的主要内容,如果未能解决你的问题,请参考以下文章