antd的嵌套子表格问题

Question

看官网的示例没说明怎样让每行嵌套的子表格不一样啊?自己用key啊之类的试了试还是全部是一样的...

Answer 1

<a-table :columns="Tablecolumns"

         :dataSource="TableDataSource.filter(data => !TableSearchContent || data.tableName.toLowerCase().includes(TableSearchContent.toLowerCase()))"
         :pagination="pagination"
         :loading="loading"
         :scroll="{ x: 800 }">
  <!--@expand="test"-->
  <a-table
    slot="expandedRowRender"
    slot-scope="record, index, indent, expanded"
    :scroll="{ x: 1300 }"
    :columns="innerColumns"
    :dataSource="record.columns"
    :pagination="false"
  >
  </a-table>
  </a-table>

Answer 2

表格有个的这个expandedRowRender属性在赋值时可以传递参数，参数就是所有已展开的行，然后再根据不同的展开行返回不同的table就可以了。

Answer 3

数据驱动吧。

<Table
   columns={columns}
   dataSource={this.state.innerTableData[record.key]}
   pagination={false}
 />

最好是在父表格的list里加一个key做索引，这样可以用record传递到子表格的列表数据上
有个误区：最开始尝试用state来记录当前展开项，最后发现是索引记录错了，子表格是函数组件写的。

Answer 4

父层的table还是像下面这么写吗？还是需要什么改动？
<Table

  className="components-table-demo-nested"
  columns={columns}
  expandedRowRender={expandedRowRender}
  dataSource={data}
/>