Vuetify Data Tables с использованием массива массивов в качестве элементов

Question

Ниже приведен пример ответа от API.Как можно использовать I Vuetify Data Tables для его визуализации.

Json:

{
    "records":[[101,"Aa"],[102,"Bb"],[103,"Cc"]],
    "column_names":["Id","Name"]
}

Таблица:

 Id  |  Name
- - - - - - -
 101 |  Aa
 102 |  Bb
 103 |  Cc

Основная проблема заключается в том, что онанет элементов в качестве словаря.

Answer 1

для HTML, сопоставить его с массивом элементов по индексу?

<td>{{ props.item[0] }}</td>
<td>{{ props.item[1] }}</td>

причина использования массива массивов для производительности, верно?Я не думаю, что изменение объекта на объект является правильным решением.

Answer 2

Для базовой таблицы данных Vuetify вам необходимо определить headers и items как пустые массивы.

data() {
  return {
    headers: [],
    items: []
  }
}

Затем просто выберите данные "column_names" для заполнения headers и "records"данные для заполнения items
Что-то вроде:

response['column_names'].forEach(resp => {
  this.headers.push({ text: resp, value: resp.toLowerCase() })
})
response['records'].forEach(resp => {
  this.items.push({ id: resp[0], name: resp[1] })
})

Ключи элементов просто должны совпадать со значениями заголовков (в вашем примере: "id" и "name")