在 blazor 应用程序中使用 mudblazor 实现通用表格组件。 .net 核心答案

【问题标题】：Implement generic table component using mudblazor with in blazor app. .net core在 blazor 应用程序中使用 mudblazor 实现通用表格组件。 .net 核心
【发布时间】：2021-11-30 09:03:52
【问题描述】：

image如何在 blazor 应用程序中使用 mudblazor 创建动态表模板。表可以是通用的。我在互联网上看不到太多资源。谁能帮帮我。

我正在尝试创建 mudtable 的可重用组件。它以列表或数据表作为输入。它是通用组件。它需要不同的输入源。

【问题讨论】：

你看过他们的例子吗mudblazor.com/components/table
是的，先生。我正在寻找通用的。上面的链接给出了可变的想法。我正在寻找通用泥桌样品。@BenRubin
如果您想要一个可以自己填充的表格，类似于 HTML 表格，请使用 MudSimpleTable mudblazor.com/components/simpletable
请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。
@BenRubin 我们可以在 mudblazer 中自定义 rowtemplete 吗？我必须创建另一个应用程序使用的模板。我看到该行模板遍历项目。但我需要超越功能。有什么办法吗？

标签： asp.net-core blazor laravel-blade blazor-webassembly mudblazor

【解决方案1】：

以下是使用 MudBlazor 制作自己的自定义组件的方法：

CESimpleTable.razor

<MudSimpleTable>
    <thead>
        <tr>
            <th>Author</th>
            <th>Text</th>
        </tr>
    </thead>
    <tbody>
        @foreach(var note in List) {
            <tr>
                <td>@note.Author</td>
                <td>@note.Text</td>
            </tr>
        }
    </tbody>
</MudSimpleTable>

@code {
    [Parameter] public List<Note> List { get; set; }
}

我们在这里使用了 MudSimpleTable，但您也可以使用 MudTable。

我们使用类 Note 进行演示：

Note.cs

    public class Note {
        public string Author { get; set; }
        public string Text { get; set; }
    }

最后是如何使用您的 CESimpleTable：

<h1>
    My own simple table component
</h1>

<CESimpleTable List="_notes"/>

@code {


    List<Note> _notes = new List<Note>() {
        new Note { Author="Henon", Text="How awesome is MudBlazor?" },
        new Note { Author="Ben Rubin", Text="Howdy!" },
    };

}

看起来是这样的：

您可以在 try.mudblazor.com 上试用此解决方案：https://try.mudblazor.com/snippet/wkQbPPbgheBvuPxq

【讨论】：