MudBlazor MudSelect选中主肌群后错误显示列表首项而非已选值

数据老陈

2026-6-19

解决MudBlazor多选MudSelect切换数据源后显示异常问题

问题场景

两个MudSelect组件：单选「主要肌群」、多选「次要肌群」
未选择主要肌群时，次要肌群的MudSelect正常显示已选值（逗号分隔形式）
选择主要肌群后，次要肌群的MudSelect下拉关闭时始终显示列表第一项，但下拉菜单内可见实际选中的正确选项

解决方案

方案1：添加@key强制组件重新渲染

当AvailableSecondaryMuscleGroups数据源随主要肌群选择变化时，给MudSelect添加@key属性，强制组件在数据源更新时重新渲染，从而正确计算显示文本：

<MudSelect T="MuscleGroups" Label="Secondary Muscle Groups" MultiSelection="true"
           @bind-SelectedValues="SecondaryMuscleGroups"
           Variant="Variant.Outlined"
           @key="AvailableSecondaryMuscleGroups">
    @foreach (var muscleGroup in AvailableSecondaryMuscleGroups)
    {
        <MudSelectItem Value="@muscleGroup">@muscleGroup.ToString()</MudSelectItem>
    }
</MudSelect>

方案2：自定义显示文本生成逻辑

直接通过SelectedValuesTextFunc接管显示文本的生成，确保始终基于实际选中值生成逗号分隔的字符串：

<MudSelect T="MuscleGroups" Label="Secondary Muscle Groups" MultiSelection="true"
           @bind-SelectedValues="SecondaryMuscleGroups"
           Variant="Variant.Outlined"
           SelectedValuesTextFunc="@(values => string.Join(", ", values.Select(v => v.ToString())))">
    @foreach (var muscleGroup in AvailableSecondaryMuscleGroups)
    {
        <MudSelectItem Value="@muscleGroup">@muscleGroup.ToString()</MudSelectItem>
    }
</MudSelect>