如何为MudBlazor选择列表添加滚动时固定的粘性表头行？

要给关联多属性的MudSelect下拉列表添加滚动时置顶的粘性表头，核心是利用DropDownContent自定义下拉内容，结合CSS粘性定位实现，避开之前遇到的渲染问题。

解决思路 #

• 放弃直接嵌入DataGrid/Table（会触发MudSelect默认渲染逻辑导致重复渲染），改用DropDownContent完全自定义下拉面板内容
• 给表头容器添加position: sticky; top: 0样式，配合背景色和层级确保滚动时始终置顶
• 将列表项放在固定高度的滚动容器内，触发滚动行为

完整实现代码 #

<MudSelect T="MyModel" Label="选择项目" @bind-Value="selectedItem" Variant="Variant.Outlined">
    <DropDownContent>
        <!-- 带滚动的下拉容器 -->
        <div style="max-height: 300px; overflow-y: auto;">
            <!-- 粘性表头 -->
            <div class="sticky-header" style="position: sticky; top: 0; background: #ffffff; padding: 0.5rem; border-bottom: 1px solid rgba(0,0,0,0.12);">
                <div class="d-flex justify-between">
                    <div style="flex: 2;">名称</div>
                    <div style="flex: 3;">描述</div>
                    <div style="flex: 1;">属性1</div>
                    <div style="flex: 1;">属性2</div>
                    <div style="flex: 1;">属性3</div>
                </div>
            </div>
            <!-- 自定义列表项 -->
            @foreach (var item in items)
            {
                <MudSelectItem T="MyModel" Value="item">
                    <div class="d-flex align-center p-2">
                        <div style="flex: 2;">@item.Name</div>
                        <div style="flex: 3;">@item.Description</div>
                        <div style="flex: 1;">@item.Prop1</div>
                        <div style="flex: 1;">@item.Prop2</div>
                        <div style="flex: 1;">@item.Prop3</div>
                    </div>
                </MudSelectItem>
            }
        </div>
    </DropDownContent>
</MudSelect>

@code {
    private MyModel selectedItem;
    private List<MyModel> items = new()
    {
        new() { Name = "项目1", Description = "第一个项目的详细描述", Prop1 = "P1", Prop2 = "P2", Prop3 = "P3" },
        new() { Name = "项目2", Description = "第二个项目的详细描述", Prop1 = "P1", Prop2 = "P2", Prop3 = "P3" },
        new() { Name = "项目3", Description = "第三个项目的详细描述", Prop1 = "P1", Prop2 = "P2", Prop3 = "P3" },
        new() { Name = "项目4", Description = "第四个项目的详细描述", Prop1 = "P1", Prop2 = "P2", Prop3 = "P3" },
        new() { Name = "项目5", Description = "第五个项目的详细描述", Prop1 = "P1", Prop2 = "P2", Prop3 = "P3" },
        new() { Name = "项目6", Description = "第六个项目的详细描述", Prop1 = "P1", Prop2 = "P2", Prop3 = "P3" },
        new() { Name = "项目7", Description = "第七个项目的详细描述", Prop1 = "P1", Prop2 = "P2", Prop3 = "P3" },
    };

    public class MyModel
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public string Prop1 { get; set; }
        public string Prop2 { get; set; }
        public string Prop3 { get; set; }
    }
}

关键说明 #

1. DropDownContent的作用：这个模板会替换MudSelect默认的下拉列表内容，所有自定义元素都会被渲染到下拉面板内部，不会跑到组件外部
2. 粘性表头样式：position: sticky需要配合top: 0生效，设置白色背景是为了滚动时覆盖下方列表项，避免内容穿透
3. 滚动容器：给外层div设置max-height和overflow-y: auto，限制下拉面板高度并触发滚动，这是粘性表头生效的前提

内容的提问来源于stack exchange，提问作者M.Chappell