Blazor虚拟化结合MudSelect时网页高度异常问题求助

云上老周

2026-6-19

解决MudSelect结合Blazor虚拟化导致高度异常的问题

问题根源

MudSelect下拉面板未明确约束高度，且Virtualize组件缺少列表项的固定高度配置，导致虚拟化计算出错，下拉区域被无限制拉伸成大片空白。

解决步骤

给Virtualize组件设置ItemSize属性，对应MudSelectItem的默认高度（通常是36px），让虚拟化组件能准确计算可见区域范围
给MudSelect添加MaxHeight属性，限制下拉面板的最大高度，确保虚拟化列表在固定范围内滚动
修正代码里@context.id的错误（你的users集合是string类型，直接用@context即可）

修正后的代码

<MudSelect Variant="Variant.Outlined" Margin="Margin.Dense" T="string" MultiSelection="true" 
           @bind-SelectedValues="@list" Adornment="Adornment.End" MaxHeight="400px">
    <Virtualize Items="users" ItemSize="36">
        <MudSelectItem Value="@context">@context</MudSelectItem>
    </Virtualize>
</MudSelect>

@code{
    IEnumerable<string> list = new HashSet<string>();
    IEnumerable<string> users = new HashSet<string>();

    protected override void OnInitialized()
    {
        var hashSet = new HashSet<string>();
        for (int i = 0; i < 1000; i++)
        {
            hashSet.Add(i.ToString());
        }
        users = hashSet;
    }
}