MudBlazor服务端分页Table多选状态丢失问题求助

服务端模式下Table切换页码后选中状态丢失，核心原因是组件默认仅维护当前页的选中项，切换页面后旧页数据被销毁，选中状态自然消失。解决思路是自己维护全局选中集合，不依赖组件内置的SelectedItems，具体实现如下：

步骤1：定义全局选中集合 #

用HashSet存储选中项的唯一标识（比如ID），确保跨页状态不丢失：

// 存储所有选中项的ID，替换成你的模型主键类型
private HashSet<int> _selectedItemIds = new HashSet<int>();
private List<YourDataModel> _currentPageData; // 当前页从服务端加载的数据
private int _totalItems; // 总数据量
private int _currentPage = 1;
private bool _selectAllCurrentPage; // 当前页全选状态

步骤2：自定义Table的复选框与全选逻辑 #

放弃组件默认的多选绑定，手动控制每一行的选中状态和全选按钮：

<MudTable T="YourDataModel" 
          Items="@_currentPageData" 
          TotalItems="@_totalItems"
          PageSize="10"
          CurrentPage="@_currentPage"
          PageChanged="OnPageChanged">
  <HeaderContent>
    <MudTh>
      <!-- 自定义全选按钮 -->
      <MudCheckBox @bind-Checked="_selectAllCurrentPage" 
                   CheckedChanged="OnSelectAllCurrentPageToggle" />
    </MudTh>
    <!-- 其他列头 -->
    <MudTh>名称</MudTh>
    <MudTh>创建时间</MudTh>
  </HeaderContent>
  <RowTemplate>
    <MudTd>
      <!-- 自定义行复选框，绑定全局集合判断选中状态 -->
      <MudCheckBox Checked="@_selectedItemIds.Contains(context.Id)" 
                   CheckedChanged="(val) => OnRowSelectionToggle(context, val)" />
    </MudTd>
    <MudTd>@context.Name</MudTd>
    <MudTd>@context.CreateTime</MudTd>
  </RowTemplate>
</MudTable>

步骤3：实现状态更新方法 #

处理行选中、全选、页面切换时的状态同步：

// 行选中状态切换
private void OnRowSelectionToggle(YourDataModel item, bool isChecked)
{
    if (isChecked)
        _selectedItemIds.Add(item.Id);
    else
        _selectedItemIds.Remove(item.Id);
    
    // 更新当前页全选按钮状态
    _selectAllCurrentPage = _currentPageData.All(x => _selectedItemIds.Contains(x.Id));
    StateHasChanged();
}

// 当前页全选/取消全选
private void OnSelectAllCurrentPageToggle(bool isChecked)
{
    foreach (var item in _currentPageData)
    {
        if (isChecked)
            _selectedItemIds.Add(item.Id);
        else
            _selectedItemIds.Remove(item.Id);
    }
    StateHasChanged();
}

// 页面切换时加载数据并同步全选状态
private async Task OnPageChanged(int newPage)
{
    _currentPage = newPage;
    // 从服务端加载当前页数据，替换成你的实际接口调用
    var pageResult = await YourDataService.GetPageData(newPage, 10);
    _currentPageData = pageResult.Data;
    _totalItems = pageResult.TotalCount;
    
    // 计算当前页全选按钮状态：是否所有项都在选中集合里
    _selectAllCurrentPage = _currentPageData.All(x => _selectedItemIds.Contains(x.Id));
    StateHasChanged();
}

关键说明 #

• 全局集合_selectedItemIds独立于Table的当前页数据，切换页面后不会被清空；
• 每一行的复选框直接根据全局集合判断状态，加载新页面时自动回显之前的选中状态；
• 全选按钮状态在每次页面切换后重新计算，确保和当前页的选中情况一致。

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