使用数组数组作为项目验证数据表

Question

以下是来自 API 的示例响应。如何使用 I Vuetify Data Tables 来渲染它。

Json:

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

Table:

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

关键问题是它没有作为字典的项目。

Answer 1

对于基本的 Vuetify 数据 table，您需要将 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] })
})

项目键只需要与 headers 值匹配（在您的示例中："id" 和 "name"）

Answer 2

对于html，按索引将其映射到项目数组？

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

之所以使用array of array是为了性能，对吧？我不认为将其更改为 object 是一个合适的解决方案。

使用数组数组作为项目验证数据表

Vuetify Data Tables using array of arrays as items

vuejs2

vuetify.js