如何在 Vue Element-Ui 表格列中显示数组？答案

【问题标题】：How to display array inside Vue Element-Ui table column?如何在 Vue Element-Ui 表格列中显示数组？
【发布时间】：2021-11-05 07:58:53
【问题描述】：

我想在循环中显示 el-table-column 内的对象数组。对于示例的每个姓名和姓氏，我想在接下来的列中显示迭代的 costData 属性值。我设法找到了我粘贴在下面的解决方案。是否可以在不为每一列重复相同循环的情况下获得相同的结果？最好我还想显示正常的表格单元格，而不是自定义 div 标签，就像在我的解决方案中一样。我很乐意提供任何帮助

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>

【问题讨论】：

标签： vue.js vuejs2 element-ui

【解决方案1】：

您要使用的是 :formatter 属性为 el-table-column，给它一个值 Function(row, column, cellValue, index) 并返回所需的结果。


    <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`, '')"
    >

【讨论】：

我无法让它工作。 ${cv.cost} 返回未定义。它没有遍历 costData 数组
对不起，我看错了问题，我已经改变了我的答案，这里是确切的实现：codepen.io/rugia/pen/MWooOgR?editors=1010