Blazor点击表格行后点击Info按钮仅展示选中行详情的实现问题

• 新增选中数据存储字段
  在组件的@code块中定义私有变量，存储当前选中的用户行数据：

  private Data _selectedUser;
  

• 优化行点击与Info按钮逻辑
  原有逻辑依赖行点击提前存储数据，容易出现用户未点选行直接点Info按钮、选中行和点击按钮行不匹配的问题，直接在Info按钮的点击事件中获取当前行数据更可靠，同时兼容原有行点击日志逻辑：
  1. 修改行点击回调，存储选中数据

  void OnSelectedRow(RowData<Data> row)
  {
      _selectedUser = row.Data;
      Console.WriteLine($"row {row.Data.dkUserName} was clicked.");
  }
  

  2. 修改第一个弹窗中ActionColumn的Info按钮点击逻辑：

  <ActionColumn Title="Action">
      <Space Size=@("middle")>
          <SpaceItem>
              <Button OnClick="@(()=>{ 
                  // 直接获取当前按钮所在行的数据，避免选中态不匹配问题
                  _selectedUser = context;
                  _visible2 = true; 
              })">Info</Button>
          </SpaceItem>
      </Space>
  </ActionColumn>
  

• 修改详情弹窗数据源
  原有详情弹窗绑定全量data集合，改为绑定仅包含选中用户的单元素集合，同时加空值判断避免空引用报错：

  <Modal Title="@title2"
     Visible="@_visible2"
     OnOk="@HandleOk2"
     OnCancel="@HandleCancel2"
     Style="width: 100%;"
     Footer=null>
    <Table TItem="Data" DataSource="@(_selectedUser == null ? new List<Data>() : new List<Data>{ _selectedUser })">
      <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>
  </Modal>
  

• 可选优化
  单条用户详情用表格展示排版冗余，可以替换为Ant Design的描述列表组件，可读性更强：

  <Descriptions Title="用户详情" Bordered Column="1">
      <DescriptionsItem Label="用户名">@_selectedUser?.dkUserName</DescriptionsItem>
      <DescriptionsItem Label="名">@_selectedUser?.dkFirstName</DescriptionsItem>
      <DescriptionsItem Label="姓">@_selectedUser?.dkLastName</DescriptionsItem>
      <DescriptionsItem Label="邮箱">@_selectedUser?.dkEmail</DescriptionsItem>
      <DescriptionsItem Label="联系电话">@_selectedUser?.dkPhoneNumber</DescriptionsItem>
      <DescriptionsItem Label="账号状态">@_selectedUser?.dkStatus</DescriptionsItem>
      <DescriptionsItem Label="启用拦截">
          <Switch @bind-Field="_selectedUser.dkEnable" Disabled="@(_selectedUser == null)"></Switch>
      </DescriptionsItem>
  </Descriptions>
  

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