Question

以下是API的示例响应。如何使用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

对于基本的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”）

Answer 2

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

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

使用array数组的原因是为了性能，对吗？我不认为将其更改为对象是正确的解决方案。

Vuetify数据表使用数组数组作为项目

2 个答案: