Vue.js 使用 Element UI 表格展示学生成绩并保存

可以使用el-table组件来展示后端传递的学生数据。在模板中，使用v-for指令遍历tabData数组，并将每个学生的相关信息显示在表格中的相应列中。例如，使用prop属性绑定学生编号、学生名和分数，然后在操作列中，使用template标签定义一个按钮，绑定点击事件saveScore，并传递当前行的学生信息作为参数。

在脚本部分，你可以使用ref创建一个响应式的tabData数组，并初始化为空数组。然后，通过发送一个POST请求到后端的API获取学生数据，并将返回的数据更新到tabData数组中。最后，定义一个saveScore函数，它接收一个学生对象作为参数，并发送一个POST请求到后端的API来保存学生的分数。根据返回的结果，你可以进行相应的处理逻辑。

需要注意的是，你需要在<script lang="ts" setup>标签中导入相关的依赖，并正确设置路由。此外，你还可以根据需要进行样式的定制。

以下是修改后的代码示例：

<template>
  <el-table :data="tabData" style="width: 100%" height="600">
    <el-table-column fixed prop="sid" label="学生编号" width="200" />
    <el-table-column prop="sname" label="学生名" width="200" />
    <el-table-column label="分数" width="200">
      <template #default="scope">
        <el-input v-model="scope.row.score" size="mini" type="number" />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="320">
      <template #default="scope">
        <el-button size="small" type="success" @click="saveScore(scope.row)">保存</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()

type studentScore = {
  sid: number;
  sname: string;
  score: number;
}
let tabData = ref([]);

function getScoreInfo() {
  axios({
    method: 'POST',
    url: '/api/selectClassScoreServlet',
    data: { classId: localStorage.getItem('classId') }
  }).then(function (result) {
    tabData.value = result.data.data;
  });
}
getScoreInfo();

const saveScore = (row: studentScore) => {
  axios({
    method: 'POST',
    url: '/api/saveScoreServlet',
    data: { sid: row.sid, score: row.score }
  }).then(function (result) {
    if (result.data.success) {
      // 保存成功后的处理逻辑
      console.log('保存成功');
    } else {
      // 保存失败后的处理逻辑
      console.log('保存失败');
    }
  });
}
</script>

<style scoped></style>

你需要根据实际情况修改API的URL和请求参数，并根据需要进行错误处理和其他逻辑的处理。