MudBlazor MudChipSet多选带过滤时选中项丢失的解决方法

问题根源 #

你推测的完全正确：MudChipSet如果直接用数组索引绑定选中项，过滤后列表的元素顺序/索引会发生变化，原来的选中索引会指向新列表里的其他元素。比如你选中"five"时它的索引是4，过滤后"four"的索引变成1，清除过滤后原来的选中索引会错误对应到"four"，导致选中项错乱。

核心解决思路 #

放弃用索引跟踪选中状态，改用每个芯片的唯一标识（比如ID）来绑定选中项。这样无论列表怎么过滤、排序，MudChipSet都能通过唯一ID准确识别选中的芯片。

步骤1：定义带唯一标识的数据模型 #

别直接用字符串数组存芯片内容，改用包含唯一ID和显示文本的对象：

public class ChipItem
{
    public int Id { get; set; }
    public string Text { get; set; }
}

// 原始全量芯片数据
public List<ChipItem> AllChips = new List<ChipItem>
{
    new() { Id = 1, Text = "one" },
    new() { Id = 2, Text = "two" },
    new() { Id = 3, Text = "three" },
    new() { Id = 4, Text = "four" },
    new() { Id = 5, Text = "five" }
};

// 过滤后的芯片列表
public List<ChipItem> FilteredChips { get; set; }

// 存储选中芯片的ID（不用索引）
public HashSet<int> SelectedChipIds { get; set; } = new();

步骤2：配置MudChipSet的绑定 #

在Blazor组件里，把MudChipSet的SelectedValues绑定到SelectedChipIds，同时给每个MudChip设置Value为芯片的唯一ID，还要加上@key帮助Blazor正确跟踪组件：

<MudTextField @bind-Value="FilterText" ValueChanged="OnFilterTextChanged" Placeholder="输入关键词过滤芯片" />

<MudChipSet MultiSelection="true" @bind-SelectedValues="SelectedChipIds">
    @foreach (var chip in FilteredChips)
    {
        <MudChip Value="chip.Id" @key="chip.Id">@chip.Text</MudChip>
    }
</MudChipSet>

步骤3：实现过滤逻辑 #

过滤时只更新FilteredChips列表，SelectedChipIds完全不受影响：

public string FilterText { get; set; }

protected override void OnInitialized()
{
    // 初始化显示全量芯片
    FilteredChips = new List<ChipItem>(AllChips);
}

protected void OnFilterTextChanged()
{
    if (string.IsNullOrWhiteSpace(FilterText))
    {
        FilteredChips = new List<ChipItem>(AllChips);
    }
    else
    {
        FilteredChips = AllChips
            .Where(c => c.Text.Contains(FilterText, StringComparison.OrdinalIgnoreCase))
            .ToList();
    }
}

关键注意点 #

• 一定要给每个MudChip加@key="chip.Id"：Blazor靠这个识别组件实例，避免过滤重新渲染时丢失选中状态。
• 选中状态绑定的是唯一ID集合，不管列表怎么变，MudChipSet都能通过ID精准匹配选中项，不会出现索引错位的问题。

验证效果 #

1. 选中"two"和"five"，此时SelectedChipIds里是2和5
2. 输入"f"过滤，列表只显示"four"和"five"，"five"依然保持选中
3. 清除过滤文本，所有芯片重新显示，"two"和"five"会正确保持选中状态，不会错误选中"four"

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