如何在Vue v-simple-table中计算ggFinalgrade的总平均值？

Hey there! I see you need to show the average of ggFinalgrade values from each row's group array in the TotalAverage column. Here's how you can do it step by step:

Step 1: Add a method to calculate the average #

In your component's <script> section, add a method that takes a grade object and returns the average of its ggFinalgrade values. We'll also handle edge cases like empty groups to avoid division by zero.

Step 2: Update the template to use this method #

In the TotalAverage column's <td>, call the method with the current grade item instead of the static {{ TotalAverage }}.

Here's the modified code with these changes:

Updated Template

<template>
  <div>
    <v-card tile>
      <v-card-title>{{ fixed.CardTitle }}</v-card-title>
      <v-simple-table>
        <thead>
          <tr>
            <th class="text-left" width="25%">{{ fixed.CourseSectionsName }}</th>
            <th class="text-left" width="35%">{{ fixed.GradeItemsItemname }}</th>
            <th class="text-center" width="10%">{{ fixed.QuizAttemptsTimefinish }}</th>
            <th class="text-center" width="10%">{{ fixed.QuestionAttemptsResponsesummary }}</th>
            <th class="text-center" width="10%">{{ fixed.GradeGradesFinalgrade }}</th>
            <th class="text-center" width="10%">{{ fixed.TotalAverage }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="grade in grades" :key="grade.name">
            <td class="text-left ">{{ grade.csName }}</td>
            <td class="text-left">
              <div class="my-3" v-for="group in grade.group" :key="group.name">
                <a :href="group.url" style="text-decoration:none">{{ group.giItemname }}</a>
              </div>
            </td>
            <td class="text-center">
              <div class="my-3" v-for="qzaTimefinish in grade.qzaTimefinish" :key="qzaTimefinish.name">{{ qzaTimefinish }}</div>
            </td>
            <td class="text-center">
              <div class="my-3" v-for="qaResponsesummary in grade.qaResponsesummary" :key="qaResponsesummary.name">{{ qaResponsesummary }}</div>
            </td>
            <td class="text-center">
              <div class="my-3 text-center" v-for="group in grade.group" :key="group.name">{{ group.ggFinalgrade }}</div>
            </td>
            <!-- Updated line to call the calculation method -->
            <td class="text-center">{{ calculateAverage(grade) }}</td>
          </tr>
        </tbody>
      </v-simple-table>
    </v-card>
  </div>
</template>

Updated Script

<script>
export default {
  data() {
    return {
      fixed: {
        CardTitle: "課程1",
        CourseSectionsName: "內容",
        GradeItemsItemname: "測驗卷",
        QuizAttemptsTimefinish: "日期",
        QuestionAttemptsResponsesummary: "教師",
        GradeGradesFinalgrade: "結果",
        TotalAverage: "總平均"
      },
      grades: [
        {
          csName: "內容1",
          group: [
            { giItemname: "測驗1-1", url: "", ggFinalgrade: 30 },
            { giItemname: "測驗1-2", url: "", ggFinalgrade: 20 },
            { giItemname: "測驗1-3", url: "", ggFinalgrade: 10 }
          ],
          qzaTimefinish: ["0913", "0913", "1415"],
          qaResponsesummary: ["教師1", "教師3", "教師4"]
        },
        {
          csName: "內容2",
          group: [
            { giItemname: "測驗2-1", url: "", ggFinalgrade: 30 },
            { giItemname: "測驗2-2", url: "", ggFinalgrade: 20 }
          ],
          qzaTimefinish: ["0913", "1415"],
          qaResponsesummary: ["教師1", "教師2"]
        }
      ]
    };
  },
  // Added method to calculate average
  methods: {
    calculateAverage(grade) {
      if (!grade.group || grade.group.length === 0) {
        return 0; // Or any default value you want for empty groups
      }
      const total = grade.group.reduce((sum, item) => sum + item.ggFinalgrade, 0);
      return total / grade.group.length;
    }
  }
};
</script>

How it works: #

• The calculateAverage method uses Array.reduce() to sum up all ggFinalgrade values in the row's group array.
• We divide the total sum by the number of items in the group to get the average.
• We added a check for empty groups to prevent division by zero, returning 0 as a fallback (you can adjust this to your needs).

This will display 20 for the first row and 25 for the second row, exactly as you wanted!

内容的提问来源于stack exchange，提问作者YI-YI