Vue.js 中使用 Element UI 表格展示学生信息并实现分数修改功能
<p>"<template>\n\t<el-table :data="tabData" style="width: 100%" height="600">\n\t<el-table-column fixed prop="sid" label="学生编号" width="200" />\n\t<el-table-column prop="sname" label="学生名" width="200" />\n\t<el-table-column label="分数" width="200">\n\t\t<template #default="scope">\n\t\t\t<el-input v-model="scope.row.score" size="mini" type="number" />\n\t\t</template>\n\t</el-table-column>\n\t<el-table-column label="操作" width="320">\n\t\t<template #default="scope">\n\t\t\t<el-button size="small" type="success" @click="saveScore(scope.row)">保存</el-button>\n\t\t</template>\n\t</el-table-column>\n</el-table>\n</template>\n\n<script lang="ts" setup>\nimport axios from 'axios';\nimport { ref } from 'vue';\nimport { useRouter } from 'vue-router'\nconst router = useRouter()\n\ntype studentScore = {\n sid: number;\n sname: string;\n score: number;\n}\nlet tabData = ref([\n{ cid: 1, sname: '学生1', score: 0 },\n // 其他学生数据...\n]);\nfunction getScoreInfo() {\n axios({\n method: 'POST',\n url: '/api/selectClassScoreServlet',\n data: { classId: localStorage.getItem('classId') }\n }).then(function (result) {\n tabData.value = result.data.data;\n });\n}\ngetScoreInfo();\n\nconst saveScore = (row: studentScore) => {\n axios({\n method: 'POST',\n url: '/api/saveScoreServlet',\n data: { sid: row.sid, score: row.score }\n }).then(function (result) {\n // 保存成功后的处理逻辑\n });\n}\n\n\n\n\n</script>\n<style scoped></style>\n要如何修改可以实现接受后端传输的学生信息\n\n要实现接收后端传输的学生信息，需要对getScoreInfo函数进行修改。在axios请求的回调函数中，将后端返回的数据赋值给tabData.value，这样就可以在模板中使用后端传输的学生信息了。\n\n修改后的代码如下：\n\n<code>javascript\nfunction getScoreInfo() {\n axios({\n method: 'POST',\n url: '/api/selectClassScoreServlet',\n data: { classId: localStorage.getItem('classId') }\n }).then(function (result) {\n tabData.value = result.data.data;\n });\n}\n</code>\n\n在这个例子中，后端返回的数据应该是一个数组，每个元素表示一个学生的信息。\n\n另外，你还需要在模板中使用tabData来渲染学生信息表格。现在的模板已经可以正确显示学生信息了。\n</p>
原文地址: https://www.cveoy.top/t/topic/qxX0 著作权归作者所有。请勿转载和采集!