vue table 某列动态求和

可以使用 Vue 的计算属性来实现某列动态求和。首先，在表格的数据源中添加一个新的属性，用于存储该列的值。然后，在计算属性中遍历数据源，将该列的值累加起来并返回即可。以下是示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>成绩</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.score }}</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>{{ totalScore }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, score: 80 },
        { name: '李四', age: 20, score: 90 },
        { name: '王五', age: 22, score: 85 }
      ]
    }
  },
  computed: {
    totalScore() {
      let sum = 0
      this.tableData.forEach(item => {
        sum += item.score
      })
      return sum
    }
  }
}
</script>

在上面的代码中，我们在表格数据源中添加了一个名为 `score` 的属性，用于存储成绩。然后，在计算属性 `totalScore` 中遍历数据源，将每个学生的成绩累加起来并返回。最后，在表格的最后一行显示总成绩。