OnRowClick显示特定信息(蚂蚁设计)

Question

我想要一张表，只给我显示关于点击的行的信息。

<Modal Title="@title"
   Visible="@_visible"
   OnOk="@HandleOk"
   OnCancel="@HandleCancel"
   Footer=null>
<Table TItem="Data" DataSource="@data" OnRowClick="OnSelectedRow">
    <AntDesign.Column @bind-Field="@context.dkId" Sortable />
    <AntDesign.Column @bind-Field="@context.dkUserName" Sortable>
        <a>@context.dkUserName</a>
    </AntDesign.Column>
    <AntDesign.Column Title="Enable" Field="@context.dkEnable">
        <Switch @bind-Field="@context.dkEnable"></Switch>
    </AntDesign.Column>
    <ActionColumn Title="Action">
        <Space Size=@("middle")>
            <SpaceItem>
                <Button OnClick="@(()=>{ _visible2 = true; })">Info</Button>
            </SpaceItem>
        </Space>
    </ActionColumn>
</Table>

<Modal Title="@title2"
   Visible="@_visible2"
   OnOk="@HandleOk2"
   OnCancel="@HandleCancel2"
   Style="width: 100%;"
   Footer=null>
  <Table TItem="Data" DataSource="@data" >
    <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>

在我的例子中，当我单击"Info“按钮时，该表将显示有关所有用户的信息。不幸的是，我在网上找不到任何信息

Answer 1

要访问行数据，需要使用<ChildContent Context="xxx">。否则，您将不知道要单击的是哪一行。例如，请参见：https://antblazor.com/en-US/components/table#components-table-demo-edit-row

在你的具体情况下，它会是这样的

<Table TItem="Data" DataSource="@modal1data">
<ChildContent Context="data">
    <ActionColumn Title="Action">
        <Space Size=@("middle")>
            <SpaceItem>
                <Button @onclick="()=>showInfo(data.dkId)"> Info</Button>
            </SpaceItem>
        </Space>
    </ActionColumn>
</ChildContent>
</Table>

然后，showInfo()需要在第二个模式中过滤数据，以便它只显示一个已单击的行。类似于：

void showInfo(int dataId){
    modal2data=modal1data.Where(x=>x.dkId==dataId).FirstOrDefault();
    _visible2 = true;
}