Blazor基于条件渲染RenderFragment实现嵌套复用表格的方案咨询

实现方案 #

你需要从通用模板侧新增可配置的行级条件判断参数，同时将子表格的数据源和模板与当前外层行实例绑定，具体实现如下：

步骤1：改造通用组件的参数定义 #

在TableWithSubTableTemplate.razor头部和@code块新增以下配置，支持双泛型绑定：

@* 声明双泛型，分别对应外层行实体、内层子表行实体 *@
@typeparam TItem
@typeparam TSubItem

@* 原有渲染代码保留 *@

@code {
    // 原有参数保留，新增以下3个参数
    /// <summary>
    /// 控制当前外层行是否展示子表的判断委托，由调用方自定义判断逻辑
    /// </summary>
    [Parameter]
    public Func<TItem, bool> ShowSubTablePredicate { get; set; }

    /// <summary>
    /// 从外层行实例获取对应子表数据源的委托
    /// </summary>
    [Parameter]
    public Func<TItem, IEnumerable<TSubItem>> GetSubTableItems { get; set; }

    /// <summary>
    /// 子表行模板，入参为子表实体实例
    /// </summary>
    [Parameter]
    public RenderFragment<TSubItem> SubTableRowTemplate { get; set; }
}

步骤2：调整组件渲染逻辑 #

修改原有外层循环的子表渲染部分，新增行级判断逻辑：

@foreach (var tableItem in TableItems)
{
    <tr>
        @TableRowTemplate(tableItem)
    </tr>

    <!-- 仅当判断委托返回true时才渲染子表 -->
    @if (ShowSubTablePredicate?.Invoke(tableItem) == true)
    {
        var currentSubItems = GetSubTableItems?.Invoke(tableItem);
        <tr>
            <td colspan="@Colspan">
                <table class="table">
                    <thead>
                        @if (SubTableHeader != null)
                        {
                            <tr>@SubTableHeader</tr>
                        }
                    </thead>
                    <tbody>
                        @if (currentSubItems != null && SubTableRowTemplate != null)
                        {
                            @foreach (var subTableItem in currentSubItems)
                            {
                                <tr>@SubTableRowTemplate(subTableItem)</tr>
                            }
                        }
                        else
                        {
                            <div class="alert alert-info" role="alert">
                                @NotFoundMessage
                            </div>
                        }
                    </tbody>
                </table>
            </td>
        </tr>
    }
}

步骤3：调用组件的正确写法 #

不需要在组件标签内写条件判断，直接通过参数传入自定义逻辑即可：

<TableWithSubTableTemplate 
    TItem="Pet" 
    TSubItem="PetDetail"
    Items="pets" 
    ShowSubTablePredicate="p => p.Active"
    GetSubTableItems="p => p.PetDetails"
    Colspan="3">
    <TableHeader>
        <th>Name</th>
        <th>Active</th>
        <th>Options</th>
    </TableHeader>
    <TableRowTemplate Context="pet">
        <td>@pet.Name</td>
        <td>@pet.Active</td>
        <td>操作按钮</td>
    </TableRowTemplate>
    <SubTableHeader>
        <th>疫苗名称</th>
        <th>接种时间</th>
    </SubTableHeader>
    <SubTableRowTemplate Context="detail">
        <td>@detail.VaccineName</td>
        <td>@detail.InoculateTime</td>
    </SubTableRowTemplate>
</TableWithSubTableTemplate>

说明 #

Blazor的组件参数是在组件初始化阶段完成绑定的，无法在组件内部标签之间直接写if判断来动态控制参数是否存在，通过传入泛型委托的方式可以把行级判断逻辑完全交给调用方自定义，适配任意实体类型的判断字段需求。

内容的提问来源于stack exchange，提问作者3r1c