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

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

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="product" label="Product"></el-table-column>
      <el-table-column prop="quantity" label="Quantity"></el-table-column>
      <el-table-column label="Unit Price">
        <template slot-scope="scope">
          <span>{{ scope.row.unitPrice }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div>Total: {{ total }}</div>
  </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 }
      ]
    }
  },
  computed: {
    total() {
      return this.tableData.reduce((acc, cur) => acc + cur.unitPrice, 0)
    }
  }
}
</script>

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

最后，我们在模板中显示表格和总计。请注意，我们没有使用el-table的footer属性来显示合计，而是将其放在了表格下方。如果您需要在表格底部显示合计，您需要相应地修改模板代码。