如何在Vue Bootstrap的b-table组件中单行展示嵌套JSON数组数据

I get it—your location and applied fields are nested arrays, so right now b-table is just spitting out raw array objects instead of readable, single-line text. Let’s fix this with two straightforward, easy-to-implement approaches:

Approach 1: Use Field Formatters (No Raw Data Modification) #

The simplest way to handle this directly in the b-table setup is using the formatter option in your fields configuration. This lets you transform the array data into a clean string on the fly, without altering your original JSON.

Update your fields array like this:

fields: [
  { key: 'id', label: 'id', sortable: true },
  { key: 'name', label: 'name', sortable: true },
  { 
    key: 'location', 
    label: 'location', 
    sortable: true,
    formatter: (value) => {
      // Combine each location's province and city, then join with commas
      return value.map(loc => `${loc.prov} - ${loc.city}`).join(', ')
    }
  },
  { 
    key: 'applied', 
    label: 'applied', 
    sortable: true,
    formatter: (value) => {
      // Extract all item names and join with commas
      return value.map(item => item.item_name).join(', ')
    }
  },
  { key: 'actions', label: 'Doc' }
],

How this works: #

• For location, we loop through each object in the array, pair the province and city into a human-readable string (e.g., "Jawa Barat - Bandung"), then glue all those strings together with , .
• For applied, we pull out each item_name and join them into a single line.
• Your original inovasi data stays exactly as it is—we’re just reshaping it for display purposes.

Approach 2: Preprocess the Data (Add Display-Friendly Fields) #

If you’d rather handle the transformation once when loading the data (say, if you need these formatted strings elsewhere in your component), you can add new string fields to your data objects during the mounted hook:

Update your mounted method:

mounted() {
  this.inovasi = json.map(item => ({
    ...item,
    // Create a pre-formatted string for location
    locationText: item.location.map(loc => `${loc.prov} - ${loc.city}`).join(', '),
    // Create a pre-formatted string for applied items
    appliedText: item.applied.map(app => app.item_name).join(', ')
  }))
},

Then tweak your fields to use these new, ready-to-display keys:

fields: [
  { key: 'id', label: 'id', sortable: true },
  { key: 'name', label: 'name', sortable: true },
  { key: 'locationText', label: 'location', sortable: true },
  { key: 'appliedText', label: 'applied', sortable: true },
  { key: 'actions', label: 'Doc' }
],

Why this might be a good fit: #

• You only compute the formatted strings once, instead of every time the table renders.
• Keeps your fields config cleaner if you have more complex formatting logic down the line.

End Result #

Either approach will turn your nested arrays into clean single-line text. For your sample data, the location column will show:

Jawa Barat - Bandung, Banten - Tanggerang

And the applied column will show:

galian, timbunan

Feel free to adjust the separators (swap , for ; or |) or add extra formatting (like wrapping each entry in parentheses) by modifying the join parameter or the string inside the map function.

内容的提问来源于stack exchange，提问作者Jon