动态显示包含不同大小嵌套数组的数据的表列/行？

Question

我正在尝试显示从 firestore 获取的数据，并希望使用 Vue.js 和 Element UI 将其显示在表格上。我已经尝试寻找解决方案，但大多数显示固定数量的数据，而对于我的情况，我的数据数量不均匀。

我的数据结构如下：

suppData: [{
  comp_name: "company 1",
  country: "country 1",
  contInfo: [{
     cpName: "John Doe",
     phone: "123123",
     email: "john@doe.com
  },
  prodList: [{
     product: "eggs",
     product: "shoes"
  }
}],

comp_name: "company 2",
      country: "country 2",
      contInfo: [{
         cpName: "Jack Doe",
         phone: "1231231",
         email: "jack@doe.com
      },
      {
         cpName: "Michelle",
         phone: "12412",
         email: "mmichelle@doe.com
      },
      prodList: [{
         product: "eggs",
      }
    }]
}]

我现在用于表格的代码，使用了其他方法，例如格式化程序，展平数据，但无法使其工作，因此感谢您的帮助！

    <el-table-column label="Company Name" prop="company_name"></el-table-column>
    <el-table-column label="Country" prop="country"></el-table-column>
    <el-table-column label="Contacs" prop="contactName.cpName"></el-table-column>

Answer 1

要添加row，您只需向数据集添加一个条目。对于列，您可以使用列数据创建单独的 array。你可以自己管理这个数组。这是一个如何实现它的示例：

HTML：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column v-for="item in tableStructure" :key="item.prop" prop="item.prop" :label="item.label"></el-table-column>
  </el-table>
      
  <el-button @click="addRow">Add row</el-button>
  <el-button @click="addColumn">Add column</el-button>
</template>

JS：

data() {
        return {
          tableStructure: [
            { label: "date", prop:"date" },
            { label: "name", prop:"name" }
          ],
          tableData: [{
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles'
          }]
        }
      },
      methods: {
        addRow() {
          this.tableData.push({
            date: '2021-001-01',
            name: 'New row',
            address: 'Other address'
          })
        },
        addColumn() {
          this.tableStructure.push({ label: "address", prop:"address" })
        }
      }
    }

下面是 codepen 中的示例：https://codepen.io/reijnemans/pen/mdrOXgZ?editors=1011