Vue.js + Element UI 实现学生成绩信息保存功能

<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([
  { cid: 1, sname: '学生1', score: 0 },
  // 其他学生数据...
]);
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>
<p>要实现将学生信息存储到后端，需要对saveScore函数进行修改。以下是修改后的代码：</p>
<pre><code class="language-html">&lt;template&gt;
  &lt;el-table :data=&quot;tabData&quot; style=&quot;width: 100%&quot; height=&quot;600&quot;&gt;
    &lt;el-table-column fixed prop=&quot;sid&quot; label=&quot;学生编号&quot; width=&quot;200&quot; /&gt;
    &lt;el-table-column prop=&quot;sname&quot; label=&quot;学生名&quot; width=&quot;200&quot; /&gt;
    &lt;el-table-column label=&quot;分数&quot; width=&quot;200&quot;&gt;
      &lt;template #default=&quot;scope&quot;&gt;
        &lt;el-input v-model=&quot;scope.row.score&quot; size=&quot;mini&quot; type=&quot;number&quot; /&gt;
      &lt;/template&gt;
    &lt;/el-table-column&gt;
    &lt;el-table-column label=&quot;操作&quot; width=&quot;320&quot;&gt;
      &lt;template #default=&quot;scope&quot;&gt;
        &lt;el-button size=&quot;small&quot; type=&quot;success&quot; @click=&quot;saveScore(scope.row)&quot;&gt;保存&lt;/el-button&gt;
      &lt;/template&gt;
    &lt;/el-table-column&gt;
  &lt;/el-table&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot; setup&gt;
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([
  { cid: 1, sname: '学生1', score: 0 },
  // 其他学生数据...
]);
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) =&gt; {
  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('保存失败');
    }
  });
}
&lt;/script&gt;

&lt;style scoped&gt;&lt;/style&gt;
</code></pre>
<p>在saveScore函数中，发送POST请求将学生的sid和score传递给后端。如果保存成功，可以在then回调函数中进行相应的处理逻辑，例如在控制台打印保存成功的提示。如果保存失败，也可以在then回调函数中进行相应的处理逻辑，例如在控制台打印保存失败的提示。根据实际情况，你可以根据后端返回的数据进行相应的处理。</p>