Question

单击表的特定行时，是否可以打开详细信息对话框。问题与物料表（https://material-table.com/）有关。提前致谢！：）

Answer 1

没有一种本机解决方案可以像您希望的那样通过材质表显示弹出窗口。但是您可以实现这一目标。

您在MaterialTable中有一个名为onRowClick的道具。

<MaterialTable onRowClick={(evt, selectedRow) => yourFunction(selectedRow)} />

使用该道具，您可以定义自己的函数来打开弹出器（https://material-ui.com/components/popper/）或在行单击时想要的任何弹出类型组件，并在其中显示所选表行的信息。

这样，您甚至可以使用获取显示更多详细信息的ID来请求获取更多详细信息！

示例：

  const alertMyRow = (selectedRow) => (
      // here i can request something on my api with selectedRow.id to get additional
      // datas which weren't displayed in the table
      alert(`name: ${selectedRow.name}, surname: ${selectedRow.surname}`);
    );

return(){
  render(
    <MaterialTable
       columns={[
          { title: 'ID', field:'id' },
          { title: 'Name', field: 'name' },
          { title: 'Surname', field: 'surname' },
          { title: 'Phone Number', field: 'phone' },
       ]}
       datas={[...]}
       onRowClick={(evt, selectedRow) => alertMyRow(selectedRow)}
     />
   )
 );

如果我不够清楚，请不要犹豫；）

打开有关行选择的对话框[物料表]

1 个答案: