vue3实现学生成绩表

在 Vue3 中实现学生成绩表通常会涉及组件化开发，以下是一个简化的步骤：

1. 定义组件结构：首先，创建一个名为 `StudentGradeTable` 的Vue组件。这个组件可以包括表格头（如姓名、科目、成绩），以及数据列表部分用于显示每个学生的成绩。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>学生姓名</th>
          <th>科目</th>
          <th>成绩</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="student in students" :key="student.id">
          <tr>
            <td>{{ student.name }}</td>
            <td>{{ student.subject }}</td>
            <td>{{ student.score }}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'StudentGradeTable',
  props: {
    students: {
      type: Array,
      required: true,
    },
  },
};
</script>

2. 使用 prop 接收数据：在父组件中，通过 `props` 将学生的成绩数据传给 `StudentGradeTable` 组件。

<template>
  <StudentGradeTable :students="studentData" />
</template>

<script>
import StudentGradeTable from './components/StudentGradeTable.vue';

export default {
  components: { StudentGradeTable },
  data() {
    return {
      studentData: [
        // 这里填充一些示例学生数据
        { id: 1, name: '张三', subject: '数学', score: 90 },
        { id: 2, name: '李四', subject: '语文', score: 85 },
        // ...
      ],
    };
  },
};
</script>

3. 数据管理：如果你的应用有状态管理需求，可以使用 Vuex 或者 Vue3 的响应式特性（如 Composition API 中的 `ref` 和 `watch`）来管理学生数据。

4. 动态性和交互：你可以添加排序、过滤等交互功能，使得用户可以根据需要查看和操作成绩表。