如何在 table vuejs 中显示 json

Question

如何显示以下json数据？我有 json 这样的数据，想在 table 中显示它，我使用 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: {
  }
}

这个结果

如何将位置和应用显示为一行 table？预先感谢那些已经回答的人:)

谢谢

Answer 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

如何在 table vuejs 中显示 json

how to display json in table vuejs

json

vue.js

vuex