Dynamic tables using indexes of arrays instead of key/value pairs?

问题

I have large datasets that I’ve already had to map to entirely new schemas twice to support exporting to various stringent document formats, so I’d like to avoid having to reformat the data structure again to support data tables. The data table component uses an array of values for the header and then an array of objects for the data. I’m stuck with using an array of arrays with the headers and data identified by the index.

data() {
  return {
     tableData = {
        [{value:'columnHeader1',type:'string'},{value:'columnHeader2',type:'string'}],
        [{value:'value1',type:'string'},{value:'value2',type:'string'}],
        [{value:'value1',type:'string'},{value:'value2',type:'string'}]
     }
  }
}

Or (I suppose I can use the other data format I have, but it's less predictable; it was designed just to be able to export to xml completely compliant to a strict DTD that's subject to change)

{
   "REPORT_NAME_ELEMENT": [
      {"SECTION_INFO_ELEMENT": [
         {"NAME_1": "SOME TEXT"},
         {"NAME_2": "SOME TEXT"}
      ]},
      {"SINGLE_LINE_SECTION_ELEMENT": {
         "RECORD_NAME": {
            "NAME":"VALUE",
            "NAME2":"VALUE"
         }
      }},
      {"SECTION_ELEMENT": {
         "RECORD_NAME": [
            {"NAME":"VALUE"},
            {"NAME":"VALUE"}
         ],
         "RECORD_NAME": [
            {"NAME":"VALUE"},
            {"NAME":"VALUE"}
         ],
         "RECORD_NAME": [
            {"NAME":"VALUE"},
            {"NAME":"VALUE"}
         ]
      }}
   ]
}

<template>
  <v-data-table
    :headers="tableData[0]"
    :items="tableData.filter(function(x,index) {index})"
    expanded
    item-key="[index]"
    show-expand
    class="elevation-1"
  >
    <template v-slot:expanded-item="{ headers }">
      <td :colspan="headers.length">Peek-a-boo!</td>
    </template>
  </v-data-table>
</template>

Are there any good options for using this data structure in a data table while still maintaining reactivity and being able to sort, search, and paginate?

I just realized I should specify that I do control the API this is coming from, and as per the spec of the document formats I'm working with, I can add additional values on the API side that the document conversion will ignore,

来源：https://stackoverflow.com/questions/57317243/dynamic-tables-using-indexes-of-arrays-instead-of-key-value-pairs

标签

Vue.js

datatable

vue-component

vuetify.js