时间戳

首页 > 解决方案 > 如何在表vuejs中显示json

json - 如何在表vuejs中显示json

问题描述

如何显示以下 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: {
  }
}

这个结果 在此处输入图像描述

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

谢谢

标签： jsonvue.jsvuex

解决方案

您可以使用格式化程序来做到这一点

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

推荐阅读