Vue的表格计算商品总价并绑定

Question

有没有vue特别精通的大L，最近遇到了一个问题，就是element表格中都是订单数据，我需要根据订单中每个商品的单价和数量计算出总金额，但是遇到了一个问题，一共渲染出两个table表格，最后算出来的总金额居然向第二张表格看齐，第一张表格算出的总金额被覆盖了？我这vue的逻辑是card为一个订单，一个订单包含多个商品，订单中的商品是用table显示的

<template>
  <div style="padding: 0 10%">
    <div v-for="o in orderData" :key="o.oid" class="text item">
      <!-- {{'列表内容 ' + o }} -->

      <el-card class="box-card" style="margin: 20px 0">
        <div slot="header" class="clearfix orderInfo">
          <span>订单号：</span><strong>{{ o.oid }}</strong>
          <span>下单时间：</span><strong>{{ o.orderTime }}</strong>
          <span>收货人：</span><strong>{{ o.name }}</strong>
          <strong style="float: right" >{{ "￥" + totalPrice }}</strong
          ><span style="float: right">订单总金额：</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <div>
          <!-- {{ "列表内容 " + o }}----订单中商品列表 -->
          <!-- 商品    单价    数量    小计    售后    状态    操作 -->
          <el-table
            :data="o.orderItemList"
            row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            default-expand-all
            :summary-method="getTotalPrice"
            show-summary
            stripe
            border
          >
            <el-table-column label="" width="180">
              <template slot-scope="scope">
                <img
                  style="width: 100%; height: 100%"
                  :src="scope.row.image"
                  alt="图片加载失败"
                />
              </template>
            </el-table-column>
            <el-table-column label="商品" prop="title"></el-table-column>
            <el-table-column label="单价" width="100" prop="price">
              <!-- <template slot-scope="scope">
                <strong>{{ "￥" + scope.row.price }}</strong></template
              > -->
            </el-table-column>
            <el-table-column
              label="数量"
              width="50"
              prop="num"
            ></el-table-column>
            <el-table-column label="小计" width="150"
              ><template slot-scope="scope">
                <strong>{{
                  "￥" + scope.row.price * scope.row.num
                }}</strong></template
              ></el-table-column
            >
            <el-table-column label="售后" width="100">
              <a href="#"
                ><el-button size="mini" type="success" round
                  >申请售后</el-button
                ></a
              >
            </el-table-column>
            <el-table-column label="状态" width="100">
              <div>已发货</div>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" class="mr-5" round
                  >订单详情</el-button
                >
                <el-button
                  size="mini"
                  type="success"
                  @click="handleEdit(scope.row)"
                  >确认收货<i class="el-icon-circle-check"></i
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
    <div style="padding: 10px 0; display: inline-block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[1,2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Orders",
  data() {
    return {
      orderData: {},
      orderItemData: {},
      totalPrice: 0,
      pageNum: 1,
      pageSize: 1,
      total: 0,
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    getTotalPrice(param) {
      const { columns, data } = param;
      // console.log(param);
      const sums = [];
      columns.forEach(() => {
        const values = data.map((item) =>
          Number(item.num * Number(item.price))
        );
        const total = values.reduce((prev, curr) => {
          return prev + curr;
        });
        sums[6] = "订单总金额";
        sums[7] = "￥" + total;
        this.totalPrice = total
        
      });
      return sums;
    },
    getOrderList() {
      this.request
        .get("/order/list", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          if (res.code === 200) {
            console.log(res.data.data);
            this.orderData = res.data.data.records;
            this.total = parseInt(res.data.data.total);
          }
        });
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getOrderList();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getOrderList();
    },
    handleEdit(row) {},
  },
};
</script>

Answer 1

对了，后台传来的数据没有商品总价这一项