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

Question

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

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

Answer 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 进行演示：

笔记.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