3

我在节点/反应页面中使用反应数据表组件。我有 2 个数据集，List并且ListNested.

list是文档数据的集合（具体来说是 xlsm），每行都有文档的最新版本。

listNested是一个类似的数据集，但包含了每个记录的所有先前版本list（如果它们存在）。

我将父表定义为：

return(    
  <DataTable
    title="Documents"
    columns={columns}
    data={list}
    pagination={true}
    fixedHeader={true}
    keyField="document_id"
    striped={true}
    highlightOnHover={true}
    noDataComponent=<div className="loader">
      <Loader
        type="Oval"
        color="#005ea2"
        height={100}
        width={100} />
    </div>
    persistTableHead={true}
    defaultSortField="updated_at"
    defaultSortAsc={false}
    overflowY={true}

    expandableRows
    expandableRowDisabled={row => row.disabled}
    expandableRowsComponent={<ExpanableComponent />}

  />
);

我的 ExpandableComponent 定义为：

const ExpanableComponent = ({listNested}) =>
  <DataTable
    columns={columnsNested}
    data={listNested}
    pagination={true}
    fixedHeader={true}
    keyField="doc_name"
    striped={true}
    highlightOnHover={true}
    noDataComponent=<div>No previous versions of this document were found.</div>
    persistTableHead={true}
    defaultSortField="updated_at"
    defaultSortAsc={false}
    overflowY={true}
  />;

文档[Here]没有明确定义这种类型的嵌套。我尝试使用该doc_name属性作为keyField，但它不能正常工作。嵌套数据显示在父表中而不是嵌套表中，但嵌套表标题确实显示在嵌套行中。

在下图中，第 2 行和第 3 行来自 中的listNested数据集，ExpandableComponent应该嵌套在第 1 行下。但是，第 1 行显示一个空数据集（带圆圈）。

在此处输入图像描述

我验证了两个列表都有我想要的数据，我只是坚持如何将第二个列表粘贴到嵌套部分。

4

2 回答 2

2

要完成这项工作，你必须准确地调用你的道具data，而不是listNested，像这样：

const ExpanableComponent = ({data, ...props}) =>
  <DataTable data={data} {...props}/>

顺便说一句，它甚至可以将自己称为expandableRowsComponent.

export default function MyDataTable({data, ...props}) {
    return <Datatable 
        expandableRows
        expandableRowsComponent={<MyDataTable className="ml-3"/>}
        noTableHead={!!data}
        noHeader={!!data}
        {...props}
    />
}

要使用此组件，您不必使用 prop data。后两个道具表明如果数据是undefined（因为 [] 仍然是真实的），那么表格不会显示任何内容。

于 2020-11-01T08:46:53.543 回答
1

我在可扩展组件的 props 中添加了 {data} 参数作为第一个参数，它对我有用。

于 2021-01-25T17:11:52.453 回答