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

Posted 2023-03-27

【中文标题】在 blazor 应用程序中使用 mudblazor 实现通用表格组件。 .net 核心

【英文标题】：Implement generic table component using mudblazor with in blazor app. .net core

【发布时间】：2021-11-30 09:03:52

【问题描述】：

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

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

【问题讨论】：

你看过他们的例子吗mudblazor.com/components/table

是的，先生。我正在寻找通用的。上面的链接给出了可变的想法。我正在寻找通用泥桌样品。@BenRubin

如果您想要一个可以自己填充的表格，类似于 html 表格，请使用 MudSimpleTable mudblazor.com/components/simpletable

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

@BenRubin 我们可以在 mudblazer 中自定义 rowtemplete 吗？我必须创建另一个应用程序使用的模板。我看到该行模板遍历项目。但我需要超越功能。有什么办法吗？

【参考方案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