如何在表格中显示 JSON 键 - VueJS

Posted

技术标签:

【中文标题】如何在表格中显示 JSON 键 - VueJS【英文标题】:How to display JSON keys in a table - VueJS 【发布时间】:2021-09-18 01:59:02 【问题描述】:

我正在使用 VueJS 创建前端:

<template>
  <div>
    <h1>My JSON</h1>
    
    <table>
      <tr v-for="b in jsondata['techniques'][0]['program']" :key="b.id">
         <td>Object.keys(b)</td>
         <!-- <td v-for="check in folder.checks">
         check.name
        </td> -->
      </tr>
     


    </table>


  </div>
</template>



<script>
import cycleDescriptionData from '@/myjson.json'
export default 
  name: 'myJSON',
  data() 
      return 
          jsondata: cycleDescriptionData,

          userInput: this.jsondata
      ;
  ,
  

;
</script>



我要显示的 JSON 在这里:https://jsoneditoronline.org/#left=cloud.55f0755dbad64a7b95f1ab0725bd6a49&right=local.kaheka。

我的目标是用以下格式编写表格的每一行:

单元格 1:密钥名称(在 object['techniques'][0]['program'] 下,例如:Is 单元格 2:键“I”下的值 单元格 3:键“I.1”下的值

所以表格的第一行看起来像:

是 | 0.000 | -250.000

我的问题是如何引用属于第一列单元格的键名?当前代码仅生成第一列,其输出如下所示:

【问题讨论】:

【参考方案1】:

你可以试试看https://bootstrap-vue.org/docs/components/table

在您的“数据”部分中,您可以定义“字段”(应具有 JSON 键的名称)。

通过创建 b-table :fields="yourFields" :options="yourJSON" 它将自动生成一个表。

【讨论】:

以上是关于如何在表格中显示 JSON 键 - VueJS的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Vuejs 中单击时突出显示表格行?

如何在 React 中将 JSON 数据显示为表格

在表格视图中显示带有 JSON 结果的数据 [关闭]

reactjs中如何使用json在表格中显示数据?

如何在xcode的表格视图中显示json数据

Restkit-如何在表格视图中显示 json 数据