vue+element 数据循环生成多个table，如何实现最后一列 平均分 合并

在Vue.js和Element UI中，当你需要在一个数据循环中生成多个表格，并计算每个表格的最后一列（平均分）作为合并单元格的结果，你可以按照以下步骤操作：

1. 定义数据结构：首先，在你的Vue实例的数据里，创建一个数组，每个元素包含必要的数据（如学生信息、成绩等），以及一个用于存储平均分的临时变量。

data() {
  return {
    students: [
      { name: '张三', scores: [80, 90, 85] },
      { name: '李四', scores: [75, 88, 92] },
      ... // 其他学生数据
    ],
    totalScores: [] // 用于存放累计分数
  }
}

2. 渲染表格：在`<template>`部分，使用`v-for`遍历`students`数组，渲染每个表格。同时，为每个学生保留一个总计分变量，并在表格的最后一列计算当前学生的平均分。

<el-table v-for="(student, index) in students" :key="index">
  <el-table-column prop="name">姓名</el-table-column>
  <!-- 其他列 -->
  <el-table-column label="平均分">
    <template slot-scope="scope">{{ student.averageScore }}</template>
  </el-table-column>
</el-table>

<script>
export default {
  computed: {
    averageScore(student) {
      if (student.scores.length > 0) {
        this.totalScores[index] = (this.totalScores[index] || 0) + student.scores.reduce((sum, score) => sum + score, 0);
        student.averageScore = this.totalScores[index] / student.scores.length;
      } else {
        student.averageScore = 0;
      }
      return student.averageScore;
    }
  },
  mounted() {
    this.students.forEach((student, i) => {
      this.totalScores[i] = 0; // 初始化总分数组
    });
  }
}
</script>

在这个例子中，我们通过`mounted`生命周期钩子初始化了总分数组，然后在`averageScore`计算属性中实时更新每个学生的平均分。当新的学生添加或已有数据更新时，这个计算属性会被自动触发。