多个嵌套表格，和表格中数据传递到嵌套表格的方法问题

[ak47wyh]

注：1未找到相关文档，2.数据传递经过多次百度尝试没有成功，3.官方demo好像只做了展示，修改并没有效果，详情请看嵌套表格demo 请大牛神威降临。 const columns = [ { title: '编号', dataIndex: 'no', }, { title: '姓名', dataIndex: 'name', }, { title: '年龄', dataIndex: 'age', },]

  const subcolumns2 = [
  {
    title: '地址',
    dataIndex: 'address',
  },
  {
    title: '详细地址',
    dataIndex: 'addressDetail',
  },]

  const subcolumns1 = [
  {
    title: '电话',
    dataIndex: 'tel',
  },
  {
    title: '手机',
    dataIndex: 'phone',
  },
  {
    title: '通信状态',
    dataIndex: 'status',
  },]

//从服务端获取数据 data = [ no:"1", name:"ccc", age:"12", sub1:{ tel:"123", phone:"456", status:"1", }, sub2:{ address:"ddd", addressDetail:"fff", } ]

[ant-design-bot]

Translation of this issue:

---

Multiple nested tables, and methods for passing data in a table to a nested table

Note: 1 did not find the relevant documents, 2. Data transmission after several attempts to Baidu did not succeed, 3. The official demo seems to only show, the modification has no effect, please see the nested form demo for details. Please come to the big cow. Const columns = [       {         Title: 'number',         dataIndex: 'no',       },       {         Title: 'name',         dataIndex: 'name',       },       {         Title: 'age',         dataIndex: 'age',       },]

      Const subcolumns2 = [       {         Title: 'address',         dataIndex: 'address',       },       {         Title: 'detailed address',         dataIndex: 'addressDetail',       },]

      Const subcolumns1 = [       {         Title: 'Phone',         dataIndex: 'tel',       },       {         Title: 'phone',         dataIndex: 'phone',       },       {         Title: 'communication status',         dataIndex: 'status',       },]

/ / Get data from the server Data = [ No: "1", Name:"ccc", Age: "12", Sub1:{   Tel: "123",   Phone:"456",   Status: "1", }, Sub2:{   Address:"ddd",   addressDetail:"fff", } ]

[ybning]

参考这2个demo： https://ant.design/components/table-cn/#components-table-demo-nested-table https://ant.design/components/table-cn/#components-table-demo-edit-row

[ak47wyh]

第一个demo以参考，问题中已指出，而且demo中未说明数据传递的方法，也不支持多个内嵌表格。第二个demo跟我的问题好像不相关

[ybning]

根据你的描述，你的问题点是：嵌套表格的编辑。 嵌套表格demo：https://ant.design/components/table-cn/#components-table-demo-nested-table 表格编辑demo：https://ant.design/components/table-cn/#components-table-demo-edit-row

数据传递：https://dvajs.com/knowledgemap/#往下传数据

上面demo综合起来，可以解决你的问题点。 @ak47wyh

[ak47wyh]

thanks，resolved

[chenshuai2144]

也可以试试新的 context api

[jiashengzhang1985]

我试了官网的做法，但是有一个新的问题 react Antd nest sub table will be Rendering multi time ?

我尝试在官网的例子中插 入一行打印信息 ... const expandedRowRender = (record, index, indent, expanded) => { console.log('para=', record, index, indent, expanded); // 这是我新加入的 const columns = [ ....

发现, 如果父表中有三行数据，那么这行debug将被打印四次， 分别是 父表中的三行 + 被expand的那一行。 我想，这样不会导致一个问题 （即父表格有N行，那么这个子表格被渲染 N + 1次）, 而且是每一次expand的时候才会渲染。

我想一个临时的解决办法，就是 在 expandedRowRender 中return的时候，根据expand的状态进行返回，但是即使这样，也会多渲染一次

有没有更好的办法，让只渲染一次？

也提了一个问题 https://stackoverflow.com/questions/76344155/how-can-i-optimize-rendering-of-nested-tables-in-react-antd-when-expanding-paren