vue element里的el-table底部合计只显示属性unitPrice才计算合计的方法案例

您可以使用Vue指令和计算属性来计算el-table中unitPrice属性的合计，并将结果显示在表格底部。下面是一个示例代码：

<template>
  <div>
    <el-table :data="tableData" :summary-method="getSummary">
      <el-table-column prop="product" label="Product"></el-table-column>
      <el-table-column prop="quantity" label="Quantity"></el-table-column>
      <el-table-column prop="unitPrice" label="Unit Price"></el-table-column>
      <el-table-column label="Total Price">
        <template slot-scope="scope">
          <span>{{ scope.row.quantity * scope.row.unitPrice }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { product: 'Product 1', quantity: 2, unitPrice: 10 },
        { product: 'Product 2', quantity: 3, unitPrice: 15 },
        { product: 'Product 3', quantity: 4, unitPrice: 20 }
      ]
    }
  },
  methods: {
    getSummary(data) {
      const sums = []
      const sumsRow = { product: 'Total', quantity: 0, unitPrice: 0 }

      data.forEach(item => {
        sumsRow.quantity += item.quantity
        if (item.unitPrice) sumsRow.unitPrice += item.unitPrice
      })

      sums.push(sumsRow)

      return sums
    }
  }
}
</script>

在这个例子中，我们将tableData数组传递给el-table组件作为数据源，并在第三列中显示unitPrice属性的值。我们还定义了一个计算属性total，该属性使用reduce方法遍历所有数据并计算unitPrice属性的合计。

我们使用summary-method属性来定义一个方法来计算合计行。在getSummary方法中，我们使用forEach方法遍历所有数据，并计算总数量和总价格。我们只计算具有unitPrice值的行的价格总和。最后，我们在计算总和的行中添加总数量和总价格。

请注意，我们在模板中没有显示总计，而是使用summary-method属性来定义一个计算合计的方法，并在表格底部显示总计行。如果您需要在表格底部显示合计，您需要相应地修改模板代码。