如何在表vuejs中显示json

Posted 2023-02-22

【中文标题】如何在表vuejs中显示json

【英文标题】：how to display json in table vuejs

【发布时间】：2021-11-05 22:52:24

【问题描述】：

如何显示以下json数据？ 我有这样的 json 数据，并且想在表格中显示它，我使用 vue-bostrapt 。 以前我是这样尝试的，但并不完美。

这是我的 json

[
    
      "id":"1",
      "name": "KINTIL",
      "desc": "Kintil is good",
      "location": [
        
        "prov": "Jawa Barat",
        "city": "Bandung"
        ,
        
        "prov": "Banten",
        "city": "Tanggerang"
        
      ],
      "applied": [
        
            "item_name": "galian"
        ,
        
            "item_name": "timbunan"
        
      ],
      "exception": [
        
            "ex_name": "F001",
            "ex_value": "001001"
        ,
        
            "ex_name": "M001",
            "ex_value": "002002"
        
      ]
    
  ]

还有这个html

<b-table class="table spacing-table" style="font-size: 13px;" show-empty 
    :items="inovasi" :fields="fields" :current-page="currentPage" :per-page="0" :filter="filter" >
</b-table>

这是我的脚本

import json from "../static/data.json";
export default 
  name: 'tes',
    data() 
    return 
        inovasi:[],
        filter: null,
        fields: [
         
            key: 'id',
            label: 'id',
            sortable: true
         ,
         
            key: 'name',
            label: 'name',
            sortable: true
         ,
         
            key: 'location',
            label: 'location',
            sortable: true
         ,
         
            key: 'applied',
            label: 'applied',
            sortable: true
         ,
          key: 'actions', label: 'Doc' 
         ],
         currentPage: 0,
         perPage: 5,
         totalItems: 0
      
  ,
  mounted() 
     this.inovasi = json;
  ,
  computed:
  ,
  methods: 
  

这个结果

如何显示位置和应用，成单行表？ 提前感谢那些回答的人:)

谢谢

【问题讨论】：

位置记录要显示哪个参数（省或城市）？

【参考方案1】：

您可以使用formatter 来做到这一点

fields: [
   
      key: 'id',
      label: 'id',
      sortable: true
   ,
   
      key: 'name',
      label: 'name',
      sortable: true
   ,
   
      key: 'location',
      label: 'location',
      sortable: true,
      formatter: (value, key, item) =>  
         return value.map(x => 'prov: ' + x.prov + ' city:' + x.city).join(", ") 
      
   ,
   
      key: 'applied',
      label: 'applied',
      sortable: true,
      formatter: (value, key, item) =>  
         return value.map(x => x.item_name).join(", ") 
      
   ,
    key: 'actions', label: 'Doc' 
],

位置列显示：prov: Jawa Barat city:Bandung, prov: Banten city:Tanggerang，应用列显示：galian, timbunan