How to display array inside Vue Element-Ui table column?

Question

I would like to display the array of objects inside el-table-column in the loop. For each name and surname of the example, I would like to display iterated costData property values in the next columns. I managed to find a solution which I paste below. Is it possible to achieve the same result without repeating the same loop for each column? Preferably I would also like to display normal table cells, not custom div tags, as in my solution. I would be glad for any help

Table data prop:
[
   {
      "name":"Jon",
      "surname":"Doe",
      "costData":[
         {
            "cost":"b",
            "totalCost":"d",
            "serviceName":""
         },
         {
            "cost":"b",
            "totalCost":"d",
            "serviceName":""
         },
         {
            "cost":"b",
            "totalCost":"d",
            "serviceName":""
         }
      ]
   }
]

<template>
    <el-table :data="tableData">
        <el-table-column prop="name" label="Name" width="120" />
        <el-table-column prop="surname" label="Surname" width="120" />
        <el-table-column prop="costData" :label="cost" width="160">
            <template slot-scope="scope">
                <div v-for="(item, index) in scope.row.costData" :key="index">
                    {{ item.serviceName }}
                </div>
            </template>
        </el-table-column>

        <el-table-column prop="costData" :label="totalCost" width="160">
            <template slot-scope="scope">
                <div v-for="(item, index) in scope.row.totalCost" :key="index">
                    {{ item.cost }}
                </div>
            </template>
        </el-table-column>

        <el-table-column prop="costData" :label="totalCost" width="160">
            <template slot-scope="scope">
                <div v-for="(item, index) in scope.row.totalCost" :key="index">
                    {{ item.totalCost }}
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

@Component({})
export default class FuelTable extends Vue {
    @Prop({ default: null })
    tableData: any;
}
</script>

Jay Li · Accepted Answer · 2021-09-13 10:26:24Z

1

what you want to use is :formatter prop for el-table-column, give it a value of Function(row, column, cellValue, index) and return the desired result.


    <el-table-column 
      prop="costData" 
      :label="cost" 
      width="160" 
      :formatter="(row, column, cv) => cv.reduce((str, item) => str + `${item.serviceName}, ${item.cost}, ${item.totalCost}\n`, '')"
    >

edited Sep 13, 2021 at 10:26

answered Sep 10, 2021 at 4:32

Jay Li

7471 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Over a year ago

I could not make it work. ${cv.cost} returns undefined. It is not iterating throught costData array

Jay Li Over a year ago

sorry, I misread the problem, I have changed my answer, and here's the exact implementation: codepen.io/rugia/pen/MWooOgR?editors=1010

Collectives™ on Stack Overflow

How to display array inside Vue Element-Ui table column?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related