当前位置：首页 > VUE

vue实现成绩报表

2026-02-23 23:03:52VUE

Vue实现成绩报表

数据准备

使用Vue的data属性定义成绩数据，通常是一个包含学生信息和成绩的数组。示例结构如下：

data() {
  return {
    students: [
      { id: 1, name: '张三', math: 85, english: 90, science: 78 },
      { id: 2, name: '李四', math: 92, english: 88, science: 85 }
    ]
  }
}

表格渲染

使用Vue的v-for指令循环渲染成绩表格。在模板中添加表格结构：

<table>
  <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>数学</th>
      <th>英语</th>
      <th>科学</th>
      <th>总分</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="student in students" :key="student.id">
      <td>{{ student.id }}</td>
      <td>{{ student.name }}</td>
      <td>{{ student.math }}</td>
      <td>{{ student.english }}</td>
      <td>{{ student.science }}</td>
      <td>{{ student.math + student.english + student.science }}</td>
    </tr>
  </tbody>
</table>

计算属性

通过计算属性实现动态计算，如总分、平均分等。在Vue实例中添加：

computed: {
  averageScores() {
    return {
      math: this.students.reduce((acc, cur) => acc + cur.math, 0) / this.students.length,
      english: this.students.reduce((acc, cur) => acc + cur.english, 0) / this.students.length,
      science: this.students.reduce((acc, cur) => acc + cur.science, 0) / this.students.length
    }
  }
}

样式优化

使用CSS或UI框架（如Element UI、Vuetify）美化表格。示例使用内联样式：

<table style="width: 100%; border-collapse: collapse;">
  <thead style="background-color: #f5f5f5;">
    <!-- 表头内容 -->
  </thead>
</table>

交互功能

添加排序或筛选功能。通过方法实现按分数排序：

methods: {
  sortBy(field) {
    this.students.sort((a, b) => b[field] - a[field]);
  }
}

在表头中添加可点击的排序按钮：

<th @click="sortBy('math')">数学 ▲</th>

图表展示

集成图表库（如ECharts）可视化成绩分布。安装ECharts后，在组件中：

vue实现成绩报表

mounted() {
  const chart = echarts.init(this.$refs.chart);
  chart.setOption({
    xAxis: { data: this.students.map(s => s.name) },
    yAxis: {},
    series: [{ data: this.students.map(s => s.math), type: 'bar' }]
  });
}