勾选表格行后调用StateHasChanged导致勾选项不一致

[vonser]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Table开启IsMultipleSelect="true"后，勾选多行记录，随后在当前页面触发了StateHasChanged()，勾选标记会消失，但SelectedRows中仍保留了勾选过的记录，这导致工具栏按钮编辑、删除的样式状态和事件触发后操作的目标数据不符合预期。

Expected Behavior

如果表格勾选项被取消或移除，SelectedRows内也应当移除与之相应的对象。

Interactive render mode

Interactive Server (Interactive server-side rendering (interactive SSR) using Blazor Server)

Steps To Reproduce

• 在页面中添加一个Table
• 添加IsMultipleSelect="true"
• 在页面中添加一个Button，设置点击事件执行StateHasChanged()，模拟其他组件触发StateHasChanged()
• 启动项目
• 勾选表格中的多行记录
• 触发StateHasChanged()
• 表格勾选项丢失，工具栏按钮状态未变更，SelectedRows中已勾选的对象仍存在
• 假如重新勾选原来的行，SelectedRows中会加入重复的对象

Exceptions (if any)

No response

.NET Version

NET9.0

Anything else?

No response

[bb-auto[bot]]

@vonser Thank you for filing this issue. In order for us to investigate this issue, please provide a minimalistic repro project that illustrates the problem.

[github-actions[bot]]

Since the issue was labeled with invalid, but no response in 2 days. This issue will be closed. If you have any questions, you can comment and reply. 由于该 issue 被标记为不合规工程，却 2 天未收到回应。现关闭 issue，若有任何问题，可评论回复

[vonser]

TableBugBlazorApp.zip

后来我们发现，在OnQueryAsync中如果调用Mapster做模型转换，就会产生这一现象。

如果您认为这并非当前代码库职责内的问题，可以关闭该Issue，谢谢。

[ArgoZhang]

@vonser 有例子就好办了。我研究一下代码先，如果是组件 bug 我们修复一下，如果可以兼容我们也会尽量兼容一下，或者看看有什么解决方案，稍后再回复

[ArgoZhang]

@vonser 找到问题了

解决方案如下，请点击下方 Make as answer 按钮标记为答案方便后来人

方案1

增加 [Key] 标签组件会通过这个标签匹配对象是否是同一对象

class UserViewModel
{
    [Key]
    [Display(Name = "用户ID")]
    [AutoGenerateColumn()]
    public string? UserId { get; set; }

    [Display(Name = "用户名")]
    [AutoGenerateColumn()]
    public string? UserName { get; set; }
}

方案2

增加组件参数 ModelEqualityComparer 值

ModelEqualityComparer="(x, y) => x.UserId == y.UserId"

<Table @ref="ThisTable"
       AutoGenerateColumns="true"
       AllowResizing="true"
       IsStriped="true"
       IsMultipleSelect="true"
       ShowColumnList="true"
       ShowLoading="true"
       ShowToolbar="true"
       ShowRefresh="true"
       ShowEmpty="true"
       ShowExportButton="true"
       ShowAddButton="false"
       ShowDeleteButton="false"
       ModelEqualityComparer="(x, y) => x.UserId == y.UserId"
       OnQueryAsync="OnQueryAsync">
    <TableColumns>
        <TableColumn @bind-Field="@(context.UserId)">
            <Template Context="value">
                <LinkButton Text="@value.Value" OnClick="OnClick" />
            </Template>
        </TableColumn>
    </TableColumns>
</Table>