table动态展示数据问题

img


接口返回的数据，圈出来的三个list是动态数据。
多个sku就换行展示，多个应收应付费用横向展示，这个横向展示的之前的没做过。

img


那些英文费用就是数组里的动态数据。

一些假数据

   list: [{
          unitPrice: '客户名',
          skuList: [{
              skuName: 'sku名',
              skuNum: 'sku数量'
            },
            {
              skuName: 'sku名1',
              skuNum: 'sku数量1'
            },
            {
              skuName: 'sku名2',
              skuNum: 'sku数量2'
            }
          ],
          collectExpenseList: [{
              expenseName: '费用名称',
              amount: '费用金额'
            },
            {
              expenseName: '费用名称1',
              amount: '费用金额1'
            },
            {
              expenseName: '费用名称2',
              amount: '费用金额2'
            }
          ]
        }],

      <el-table border :data="list" max-height="300" ref="multipleTable" @select="handleSelectionChange"
        @select-all="handleAllChange" v-loading="loading">
        <el-table-column type="selection" width="40"> </el-table-column>
        <el-table-column label="#" type="index" :index="indexMethod" fixed width="56"></el-table-column>
        <el-table-column label="客户名称" prop="unitPrice">
        </el-table-column>
        <el-table-column label="系统编号" prop="lssuingBatchNo">
        </el-table-column>
        <el-table-column label="客户订单号" prop="customerOrderCode">
        </el-table-column>
        <el-table-column label="尾程渠道" prop="finalChannelName">
        </el-table-column>
        <el-table-column label="供应商渠道" prop="finalSupplierChannelName">
        </el-table-column>
        <el-table-column label="出库单号" prop="outOrderCode">
        </el-table-column>
        <el-table-column label="发货日期" prop="shipmentDateName">
        </el-table-column>
        <el-table-column label="邮编" prop="zipCode">
        </el-table-column>
        <el-table-column label="州/省" prop="state" width="160">
        </el-table-column>
        <!--  -->
        <el-table-column label="SKU" prop="skuList" width="160">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.skuList">
              {{ item.skuName }}
              <div class="bottomLine" v-if="scope.row.skuList.length >= 2 && index != scope.row.skuList.length - 1">
              </div>
            </span>
          </template>
        </el-table-column>
        <!--  -->
        <el-table-column label="数量" prop="skuList" width="160">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.skuList">
              {{ item.skuNum }}
              <div class="bottomLine" v-if="scope.row.skuList.length >= 2 && index != scope.row.skuList.length - 1">
              </div>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="重量单位" prop="weightName" width="160">
        </el-table-column>
        <el-table-column label="zone/派送分区" prop="zoneName" width="160">
        </el-table-column>
        <el-table-column label="地址类型" prop="addressName" width="160">
        </el-table-column>
        <el-table-column label="成人签收" prop="isAdultSignature" width="160">
        </el-table-column>
        <el-table-column label="燃油附加率" prop="rate" width="160">
        </el-table-column>
        <el-table-column label="应收计费重" prop="collectWeightingValue" width="160">

        </el-table-column>
        <!--  应收费用列表-->
        <el-table-column label="应收费用列表" prop="collectExpenseList" width="160">
          <template slot-scope="scope">
            <el-table-column v-for="title in scope.row.collectExpenseList" :prop="title.prop" :label="title.expenseName" align="center"
              :key="title.prop" :index="title.index" :width="title.width">
              <span>{{ title.amount }}</span>
            </el-table-column>
          </template>
        </el-table-column>
        <!--  -->
        <!--  应付费用列表-->
        <el-table-column label="应付费用列表" prop="costExpenseList" width="160">
        </el-table-column>
        <!--  -->
        <!-- <el-table-column label="供应商名称" prop="createTimeName" width="160">
          </el-table-column> -->
        <el-table-column label="应付计费重" prop="costWeightingValue" width="160">
        </el-table-column>
        <el-table-column label="应收客户" prop="collectAmount" width="160">
        </el-table-column>
        <el-table-column label="应付供应商" prop="costAmount" width="160">
        </el-table-column>
        <el-table-column label="理论利润" prop="profit" width="160">
        </el-table-column>
      </el-table>

img


我这个横向展示，正常的是绿色框里内容就够了，现在红色框重复了

把数据当成表头不就横向展示了吗

=分割线=
解决

      <el-table border :data="list" max-height="300" ref="multipleTable" @select="handleSelectionChange"
        @select-all="handleAllChange" v-loading="loading">
        <el-table-column type="selection" width="40"> </el-table-column>
        <el-table-column label="#" type="index" :index="indexMethod" fixed width="56"></el-table-column>
        <el-table-column label="客户名称" prop="unitPrice">
        </el-table-column>
        <el-table-column label="系统编号" prop="lssuingBatchNo">
        </el-table-column>
        <el-table-column label="客户订单号" prop="customerOrderCode">
        </el-table-column>
        <el-table-column label="尾程渠道" prop="finalChannelName">
        </el-table-column>
        <el-table-column label="供应商渠道" prop="finalSupplierChannelName">
        </el-table-column>
        <el-table-column label="出库单号" prop="outOrderCode">
        </el-table-column>
        <el-table-column label="发货日期" prop="shipmentDateName">
        </el-table-column>
        <el-table-column label="邮编" prop="zipCode">
        </el-table-column>
        <el-table-column label="州/省" prop="state" width="160">
        </el-table-column>
        <!--  -->
        <el-table-column label="SKU" prop="skuList" width="160">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.skuList">
              {{ item.skuName }}
              <div class="bottomLine" v-if="scope.row.skuList.length >= 2 && index != scope.row.skuList.length - 1">
              </div>
            </span>
          </template>
        </el-table-column>
        <!--  -->
        <el-table-column label="数量" prop="skuList" width="160">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.skuList">
              {{ item.skuNum }}
              <div class="bottomLine" v-if="scope.row.skuList.length >= 2 && index != scope.row.skuList.length - 1">
              </div>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="重量单位" prop="weightName" width="160">
        </el-table-column>
        <el-table-column label="zone/派送分区" prop="zoneName" width="160">
        </el-table-column>
        <el-table-column label="地址类型" prop="addressName" width="160">
        </el-table-column>
        <el-table-column label="成人签收" prop="isAdultSignature" width="160">
        </el-table-column>
        <el-table-column label="燃油附加率" prop="rate" width="160">
        </el-table-column>
        <el-table-column label="应收计费重" prop="collectWeightingValue" width="160">

        </el-table-column>
        <!--  应收费用列表-->
        <!-- <el-table-column label="应收费用列表" prop="collectExpenseList" width="160">
          <template slot-scope="scope">
            <el-table-column v-for="(title,index) in scope.row.collectExpenseList" :prop="title.prop" :label="title.expenseName" align="center"
              :key="title.prop" :index="title.index" :width="title.width">
              {{ title }}
            </el-table-column>
          </template>
        </el-table-column> -->
        <el-table-column v-for="(title,index) in collectExpenseList" :prop="title.prop" :label="title.expenseName" align="center"
              :key="title.prop" :index="title.index" :width="title.width">
              {{ title.amount }}
            </el-table-column>
        <!--  -->
        <!--  应付费用列表-->
        <el-table-column label="应付费用列表" prop="costExpenseList" width="160">
        </el-table-column>
        <!--  -->
        <!-- <el-table-column label="供应商名称" prop="createTimeName" width="160">
          </el-table-column> -->
        <el-table-column label="应付计费重" prop="costWeightingValue" width="160">
        </el-table-column>
        <el-table-column label="应收客户" prop="collectAmount" width="160">
        </el-table-column>
        <el-table-column label="应付供应商" prop="costAmount" width="160">
        </el-table-column>
        <el-table-column label="理论利润" prop="profit" width="160">
        </el-table-column>
      </el-table>

【以下回答由 ChatGPT 生成】

你可以使用Vue.js的模板语法和循环指令来展示动态数据的表格。你可以使用v-for指令来循环遍历SKU列表和应收应付费用列表，并将它们在表格中展示。

以下是一个可能的解决方案：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>客户名</th>
          <th v-for="sku in list[0].skuList" :key="sku.skuName">{{ sku.skuName }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.unitPrice">
          <td>{{ item.unitPrice }}</td>
          <td v-for="sku in item.skuList" :key="sku.skuName">{{ sku.skuNum }}</td>
        </tr>
      </tbody>
    </table>

    <table>
      <thead>
        <tr>
          <th></th>
          <th v-for="expense in list[0].collectExpenseList" :key="expense.expenseName">{{ expense.expenseName }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.unitPrice">
          <td>{{ item.unitPrice }}</td>
          <td v-for="expense in item.collectExpenseList" :key="expense.expenseName">{{ expense.amount }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          unitPrice: '客户名',
          skuList: [
            {
              skuName: 'sku名',
              skuNum: 'sku数量'
            },
            {
              skuName: 'sku名1',
              skuNum: 'sku数量1'
            },
            {
              skuName: 'sku名2',
              skuNum: 'sku数量2'
            }
          ],
          collectExpenseList: [
            {
              expenseName: '费用名称',
              amount: '费用金额'
            },
            {
              expenseName: '费用名称1',
              amount: '费用金额1'
            },
            {
              expenseName: '费用名称2',
              amount: '费用金额2'
            }
          ]
        }
      ]
    };
  }
};
</script>

这个解决方案使用了两个表格，一个表格用于展示SKU数据，另一个表格用于展示应收应付费用数据。在模板中使用了v-for指令来循环遍历列表，并使用:key绑定唯一的键值。

希望这个解决方案可以帮助你展示动态数据的表格。如果你有任何其他问题，请随时提问。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^