如何在不使用JS互操作时为最后一个Blazor组件添加指定CSS类

实现思路 #

1. 给HeaderCell组件新增参数，用于控制是否显示右侧边框
2. 在HeaderRow组件中，当Bordered为true时，解析子内容里的所有HeaderCell，将最后一个的右侧边框参数设为true

具体代码修改 #

1. 改造HeaderCell组件 #

修改HeaderCell.razor，添加控制右侧边框的参数，并动态绑定CSS类：

<div class="@(ShowBorderRight ? "border-right" : string.Empty)">
    @ChildContent
</div>
@code {
    [Parameter]
    public bool ShowBorderRight { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

HeaderCell.razor.css保留原有样式：

.border-right{
    border-right: solid 0.1em #707070;
}

2. 改造HeaderRow组件 #

修改HeaderRow.razor，通过解析RenderTree处理子组件，标记最后一个HeaderCell：

<div class="@(Bordered ? "bordered" : string.Empty)">
    @ProcessedChildContent
</div>
@code {
    [Parameter]
    public bool Bordered { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private RenderFragment ProcessedChildContent => builder =>
    {
        // 不需要边框时直接渲染原始内容
        if (!Bordered)
        {
            ChildContent(builder);
            return;
        }

        // 收集所有HeaderCell组件的帧信息
        var headerCellFrames = new List<(int Index, RenderTreeFrame Frame)>();
        var originalBuilder = new RenderTreeBuilder();
        ChildContent(originalBuilder);
        var frames = originalBuilder.GetFrames();

        for (int i = 0; i < frames.Count; i++)
        {
            var frame = frames[i];
            if (frame.FrameType == RenderTreeFrameType.Component && frame.ComponentType == typeof(HeaderCell))
            {
                headerCellFrames.Add((i, frame));
            }
        }

        // 遍历原始帧，修改最后一个HeaderCell的参数
        for (int i = 0; i < frames.Count; i++)
        {
            var currentFrame = frames[i];
            var isLastHeaderCell = headerCellFrames.Any(h => h.Index == i) && i == headerCellFrames.Last().Index;

            if (isLastHeaderCell)
            {
                // 重新构建最后一个HeaderCell，添加ShowBorderRight参数
                builder.OpenComponent<HeaderCell>(currentFrame.Sequence);
                // 复制原有属性
                foreach (var attr in currentFrame.Attributes)
                {
                    builder.AddAttribute(currentFrame.Sequence, attr.Name, attr.Value);
                }
                // 设置右侧边框参数
                builder.AddAttribute(currentFrame.Sequence, nameof(HeaderCell.ShowBorderRight), true);
                builder.CloseComponent();
            }
            else
            {
                // 其他帧原样复制
                builder.AddFrame(currentFrame);
            }
        }
    };
}

HeaderRow.razor.css保留原有样式，同时保留子元素左边框规则：

.bordered{
    border-top: solid 0.1em #707070;
    border-bottom: solid 0.1em #707070;
}

.bordered > div{
    border-left: solid 0.1em #707070;
}

效果说明 #

当使用<HeaderRow Bordered>时：

• 所有HeaderCell通过HeaderRow的CSS获得左侧边框
• 最后一个HeaderCell通过ShowBorderRight参数自动添加border-right类，获得右侧边框
• 整个HeaderRow有上下边框，形成完整的表格头部边框结构

这种方式完全通过C#在Blazor渲染阶段处理，没有JS互操作的延迟问题，符合需求。

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