如何得到el-table-colmun中每行数据相加的总和

在Vue中使用Element UI的el-table组件时，可以通过计算属性来获取每行数据相加的总和。以下是一个简单的例子：

假设你的el-table绑定的数据是一个数组tableData，每个元素都有一个num属性，你想要计算每行的这个属性总和。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="num" label="数量"></el-table-column>
    <!-- 添加一个总和列 -->
    <el-table-column label="总和">
      <template slot-scope="scope">
        {{ getRowTotal(scope.row) }}
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { name: '商品A', num: 10 },
        { name: '商品B', num: 20 },
        // ...更多数据
      ]
    };
  },
  methods: {
    getRowTotal(row) {
      return row.num;
    }
  }
};
</script>

在这个例子中，getRowTotal方法被用来获取每行的num属性值，并在el-table-column的template插槽中显示。

如果你想要获取所有行的总和，可以使用一个计算属性：

computed: {
  total() {
    return this.tableData.reduce((acc, item) => acc + item.num, 0);
  }
}

然后，你可以在模板中显示这个总和：

<template>
  <!-- ... -->
  <div>总和: {{ total }}</div>
</template>

这样，你既可以在每行显示单项总和，也可以在表格下方显示所有行的总和。