如何将GraphQL查询与BootstrapVue b-table一起使用

Question

我可以将<b-table-simple>与GraphQL查询一起使用，它运行良好，例如：

<b-table-simple>
<b-tbody>
<b-tr role="row" v-for="page in $page.allGoogleSheet.edges" :key="page.id">
<b-td>
{{page.node.Name}}
</b-td>
<b-td>
{{page.node.Age}}
</b-td>
<b-td>
{{page.node.Height}}
</b-td>
</b-tr>
</b-tbody>
</b-table-simple>

但是我怎样才能用<b-table>做到这一点呢？

Answer 1

您需要定义要从每行数据中提取的字段：

<template>
<b-table :fields="fields" :items="$page.allGoogleSheet.edges">
</b-table>
</template>
<script>
export default {
data() {
return {
fields: [
// Add this entry if you want to see the ID of the entry
// { key: 'id', label: 'ID' },
{ key: 'node.Name', label: 'Name' },
{ key: 'node.Age', label: 'Age' },
{ key: 'node.Height', label: 'Height' },
]
}
}
}
</script>