vue.js - Ant design vue嵌套表中的不同数据

Question

我正在尝试制作嵌套表，在文档中将它们推送到嵌套表中，它们推送一个相同的数据，我如何更改它并为每个父表行推送不同的数据？

<script>
      const columns = [
      { title: 'Status', dataIndex: 'Status', key: 'Status' },
      { title: 'Date', dataIndex: 'DateCreated', key: 'DateCreated' }
    ];

    const innerColumns = [
      { title: 'Price', dataIndex: 'Price', key: 'Price' },
      { title: 'Status', dataIndex: 'Status', key: 'Status' },
    ];

    const data = [
       {
        key: 0,
        "Status": "u",
        "DateCreated": "2019-10-11"
      },
      {
        key: 1,
        "Status": "u",
        "DateCreated": "2019-09-20"
      },
    ];

    const innerData = [
          [
            {
              key: 0,
              "Price": 10623,
              "Status": "u",
            }
          ],
          [
            {
              key: 0,
              "Price": 15084,
              "Status": "u",
            },
            {
              key: 1,
              "Price": 15084,
              "Status": "u",
            }
        ],
    ];
    export default {
      data() {
       return {
        data,
        columns,
        innerColumns,
        innerData,
      };
    },
   };
   </script>

<template>
    <div class="hello">
    <a-table
            :columns="columns"
            :dataSource="data"
            class="components-table-demo-nested">
      <a-table
        slot="expandedRowRender"
        :columns="innerColumns"
        :dataSource="innerData[1]"
        :pagination="false"
      >
      </a-table>
    </a-table>
   </div>
</template>

    

这是我的代码

标签： vue.jsantd

Answer 1

这对我有用

模板：

<a-table :data-source="data" :defaultExpandAllRows="true" v-on:expandedRowsChange="console.log">
    <a-table-column title="First Col" data-index="firstCol" />

    <template v-slot:expandedRowRender="record, index, indent, expanded">
        <a-table :data-source="record.nestedData"
                 :pagination="false">
            <a-table-column title="File Name" data-index="filename" />
        </a-table>
    </template>
</a-table>

脚本：

Vue.component('demo', {
    data: function() {
        return {
            data: [
                {
                    firstCol: '1',
                    nestedData: [{filename: 'nested 11'}, {filename: 'nested 12'}]
                },
                {
                    firstCol: '2',
                    nestedData: [{filename: 'nested 22'}, {filename: 'nested 22'}]
                }
            ]
        }
    }
});