MudBlazor：如何使用 colspan 和 rowspan 使用 MudTable 创建自定义 table？

Question

我想将下面的 html table 转换为 MudTable。但我无法弄清楚如何使用 MudBlazor 库实际执行此操作。在HTML中，我使用了rowspan和colspan来实现下面的table。我是使用 Mudblazor 库的新手，但我进行了很多搜索以找到解决方案，但我找不到。希望有人能帮助我。

目标Table

我的尝试

<MudTable Items="@selectedDriver.Capability.cActions"
      Class="mt-5"
      Dense="@true" Hover="@true" Bordered="@true" Striped="@true" ReadOnly="@dronly" CanCancelEdit="@true"
      RowEditPreview="BackupActionItem"
      RowEditCancel="ResetActionItemToOriginalValues"
      RowEditCommit="ActionItemHasBeenCommitted"
      CustomHeader="@true"
      @ref="actionTable">
<HeaderContent>
    <MudTHeadRow>
        <MudTh>No.</MudTh>
        <MudTh>Action</MudTh>
        <MudTh colspan="2">Parameters</MudTh>
        <MudTh>Return Type</MudTh>
    </MudTHeadRow>
</HeaderContent>

<RowTemplate>
    @foreach (var item in context.Parameters.Select((value, i) => new { i, value }))
    {
        var index = item.i;
        var parameter = item.value;
        var paramCount = context.Parameters.Count();

        @if (index == 0)
        {
            <MudTd rowspan="@(paramCount)" scope="row" DataLabel="No.">*</MudTd>
            <MudTd rowspan="@(paramCount)" scope="row" DataLabel="Name">@context.Name</MudTd>
        }

        <MudTd DataLabel="Parameter">@parameter.Name</MudTd>
        <MudTd DataLabel="Type">@parameter.Type.ToString()</MudTd>

        @if (index == 0)
        {
            <MudTd rowspan="@(paramCount)" scope="row" DataLabel="Name">@context.ReturnType.ToString()</MudTd>
        }
    }
</RowTemplate>

结果

Answer 1

我建议您在行模板中嵌入另一个 <table>。这里有一个 fiddle 供你玩：https://try.mudblazor.com/snippet/ckGPPbwepSPTlFpg

看起来像这样：

完整示例：

<MudTable Items="@actions"
      Class="mt-5"
      Dense="@true" Hover="@true" Bordered="@true" Striped="@true"  CanCancelEdit="@true"
      CustomHeader="@true"
      >
<HeaderContent>
    <MudTHeadRow>
        <MudTh>No</MudTh>
        <MudTh>Action</MudTh>
        <MudTh>Parameters</MudTh>
        <MudTh>Return Type</MudTh>
    </MudTHeadRow>
</HeaderContent>

<RowTemplate>
    <MudTd DataLabel="No">@context.No</MudTd>
    <MudTd DataLabel="Action">@context.Action</MudTd>
    <MudTd DataLabel="Parameters">
        <table>
            @foreach (var p in context.Params)
            {
               <tr  style="border: 1px solid silver;  border-collapse: collapse;">
                   <td class="pa-1">@p.No</td>
                   <td class="pa-1">@p.Name</td>
                   <td class="pa-1">@p.Type</td>
               </tr>     
            }
        </table>
    </MudTd>
    <MudTd DataLabel="ReturnType">@context.ReturnType</MudTd>
</RowTemplate>

</MudTable>

@code {
    public class MyAction {
        public int No {get; set;}
        public string Action {get; set;}
        public List<Param> Params {get; set;} = new List<Param>();
        public string ReturnType {get; set;} = "void";
    }
    public class Param {
        public int No {get; set;}
        public string Name {get; set;}
        public string Type {get; set;}="string";
    }

    List<MyAction> actions = new List<MyAction>() {
        new MyAction { No = 1, Action="HelloWorld",  },
        new MyAction { No = 2, Action="SomeFunction",  Params=new List<Param> {
                new Param { No=1, Name="param1", },                
                new Param { No=2, Name="param2", },                
                new Param { No=3, Name="param3", },                
                new Param { No=4, Name="param4", },                
            },
        },
    };
}

MudBlazor：如何使用 colspan 和 rowspan 使用 MudTable 创建自定义 table？

MudBlazor: How to create a custom table with MudTable using colspan and rowspan?

c#

razor

blazor

mudblazor