怎么才能让Antd中的嵌套子表格渲染不一样的内容

目录

一、子表格与父表格的数据存储在一起

方式一：Function(record, index, indent, expanded):VNode

方式二：#expandedRowRender="{record, index, indent, expanded}"

二、子表格与父表格的数据分开存储

可以看到Antd中为了演示方便，嵌套子表格的内容都是一样的，那怎么才能让子表格展示的内容不一样呢？

注：使用Ant Design Vue 2.2.8版本进行代码演示，原代码是Antd 2.2.8版本中嵌套子表格中的代码。

一、子表格与父表格的数据存储在一起

首先把父表格数据data存储成以下格式

  const data = [
  {
    key: 0,
    name: "Screem",
    platform: "iOS",
    arr: [
      {
        key: 1,
        date: "2014-12-24 23:12:00",
        name: "name1",
        upgradeNum: "Upgraded: 56",
      },{子表格单行数据},{子表格单行数据}
    ],
    version: "10.3.4.5654",
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  },{父表格单行数据},{父表格单行数据}]

其次，可以看到，官网对设置子表格有两种方式。

方式一：Function(record, index, indent, expanded):VNode

意思就是在methods里写一个方法，这个方法需要返回一个虚拟节点（也就是子表格）。

1. <a-table  :expandedRowRender="handlerexpandedRowRender"></a-table>

在<a-table></a-table>中添加 :expandedRowRender="handlerexpandedRowRender" ，表示表格需要子表格，点击展开子表格按钮的时候就执行methods中名为handlerexpandedRowRender的方法。

2. 在methods里写一个名为handlerexpandedRowRender的方法。

  handlerexpandedRowRender(record) {
    console.log("1", record);
    return (
      <a-table
        columns={innerColumns}
        data-source={
          record.index === record.record.key ? record.record.arr : null
        }
        pagination={false}
      ></a-table>
    );
  },

•     record是表格的单行数据，写方法之前可以先看一下输出，心里有个数。
•     data-source的内容可以按需修改，这里只是做个简单的示范。
•     record.record.arr是一个数组，存储了单个子表格的数据（就是第一部分data里arr的内容）。
•     如果这样写的话，那些花里胡哨的数据样式可能就不会显示了（反正我不知道怎么弄，知道的可以告诉我一下，感谢），所以适合只需要展示数据的子表格。

效果如下：

方式二：#expandedRowRender="{record, index, indent, expanded}"

意思就是在template里写一个插槽，template里的各项元素的值可以使用上方{}里的内容。思路简写：

    <a-table>
      <template #expandedRowRender="{ record }">
        <a-table
          :columns="innerColumns"
          :data-source="record.arr"
          :pagination="false"
        >
        </a-table>
      </template>
    </a-table>

•     record是单行数据，record.arr是一个数组，存储了单个子表格的数据（就是第一部分data里arr的内容）。
•     大致意思就是父表格里放一个子表格插槽，方便内部的子表格获取数据，record表示单行数据，插槽内部放一个子表格，子表格的写法就是普通表格的写法了，没有区别。
•     data-source的内容可以按需修改，这里只是做个简单的示范。
•     如果这样写的话，那些花里胡哨的数据样式可以显示。

效果如下：

 

二、子表格与父表格的数据分开存储

以上两种方式，都是根据获取的单行数据中的子表格数据来渲染子表格，也就是说子表格的数据都和父表格一样保存在data中。但是我们有时候想要把父表格数据和子表格数据分开存放，那就需要别的方法啦。

把子表格数据按以下格式（键值对）存储：

{1:[{},{},{}],2:[{},{},{}],3:[{},{},{}]}

•     可以看出上述格式描述的是单页的三个子表格，每个子表格有三行数据。
•     所有单页子表格的数据保存为一个对象，对象中每一个子表格使用一个数组存储，单个子表格数组中的 {} 对象代表的是单个子表格的单行数据。
•     1,2,3是子表格数据的属性名，跟随的[]是子表格属性值。

举个栗子：

handlerexpandedRowRender(record) {
    return (
      <a-table
        columns={innerColumns}
        data-source={
          this.innerDataObj[
            (this.pagination.current - 1) * 10 + record.index + 1
          ]
        }
        pagination={false}
      ></a-table>
    );
  },

•     this.innerDataObj是一个对象，存储着所有的子表格数据，按{1:[{},{},{}],2:[{},{},{}],3:[{},{},{}]}格式存储的。（{}[]这种大家应该能看懂吧？就是对象取[]里的属性名的属性值）
•     this.pagination.current指的是当前的表格页数，是数值型的（此案例表格每页显示10条数据）。
•     record.index是每行数据的索引，不管是哪一页，值都是0-9。

大家意会一下，注意切换表格页的时候要清除子表格的数据，再重新赋值。

看不懂也可以再看一下

antd中嵌套表格，子表格数据相同的问题解决（hook写法） - 百度文库

这篇文章对于子表格与父表格数据存在不一样的地方的描述会更详细一些（看懂思路，数据存储格式是一样的，存储方式可以不一样，不用点击再存）。