Blazor Ant Design Table点击行/按钮仅展示当前行数据问题

详情模态框内的Table组件直接绑定了全量数据集@data，点击按钮时没有记录当前选中的行数据，所以会渲染所有用户信息。

• 新增字段存储当前选中的行数据
  在组件的@code块中添加单条数据的存储变量：

private Data _currentSelectedRow;

• 修改Info按钮点击逻辑，点击时传入当前行数据
  操作列的按钮可以直接通过context获取当前行对应的实体，点击时先给选中变量赋值，再打开模态框：

<ActionColumn Title="Action">
    <Space Size=@("middle")>
        <SpaceItem>
            <Button OnClick="@(()=>{ 
                _currentSelectedRow = context; 
                _visible2 = true; 
            })">Info</Button>
        </SpaceItem>
    </Space>
</ActionColumn>

如果需要实现点击整行弹出详情的效果，在你已有的OnSelectedRow方法中做相同赋值即可：

private void OnSelectedRow(Data row)
{
    _currentSelectedRow = row;
    _visible2 = true;
}

• 修改详情模态框内Table的数据源
  Table组件要求数据源为集合类型，将原来绑定的全量@data替换为仅包含当前选中行的数组即可，做空值判断避免空引用异常：

<Table TItem="Data" DataSource="@(_currentSelectedRow == null ? Array.Empty<Data>() : new []{_currentSelectedRow})">
    <!-- 原有列定义保持不变即可 -->
    <AntDesign.Column @bind-Field="@context.dkUserName" Sortable>
        <a>@context.dkUserName</a>
    </AntDesign.Column>
    <AntDesign.Column @bind-Field="@context.dkFirstName" Sortable>
        <a>@context.dkFirstName</a>
    </AntDesign.Column>
    <AntDesign.Column @bind-Field="@context.dkLastName" Sortable>
        <a>@context.dkLastName</a>
    </AntDesign.Column>
    <AntDesign.Column @bind-Field="@context.dkEmail" Sortable>
        <a>@context.dkEmail</a>
    </AntDesign.Column>
    <AntDesign.Column @bind-Field="@context.dkPhoneNumber" Sortable>
        <a>@context.dkPhoneNumber</a>
    </AntDesign.Column>
    <AntDesign.Column @bind-Field="@context.dkStatus" Sortable>
        <a>@context.dkStatus</a>
    </AntDesign.Column>
    <AntDesign.Column Title="Intercept" Field="@context.dkEnable">
        <Switch @bind-Field="@context.dkEnable"></Switch>
    </AntDesign.Column>
</Table>

如果模态框仅用于展示单条数据详情，不建议嵌套Table组件，换成Ant Design的Descriptions描述列表组件展示信息更简洁，不需要额外包装集合，直接绑定_currentSelectedRow的字段即可。

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