el-table可编辑表格，实现输入数据检验，且失去焦点即修改成功。
提示：本博客为开发过程中的日常记录，读者可自行使用，并在此基础上完善。感谢支持。
文章目录
- 前言
- 一、示例
-
- 效果展示：
- 二、完成步骤
-
- 1.VUE前端代码
- 2.内容讲解
-
- 数据绑定
- 关键函数
- 总结
- 附录
-
- 完整代码
前言
提示：创作背景
在完成大四综合实践的过程中，需要一个VUE前端可编辑表格界面，可以实现成绩的录入提交功能。
提示：以下是本篇文章正文内容
一、示例
本文用常见的成绩管理系统的成绩录入模块，完成el-table的建立，并且完成限制输入数据的范围、失去焦点后自动计算总评成绩、自动提交功能。
效果展示：
二、完成步骤
1.VUE前端代码
template：
<template>
<el-table ref="multipleTable" border stripe :data="tableData" tooltip-effect="dark" @selection-change="selsChange" style="width: 100%;margin-top: 30px">
<el-table-column type="selection" width="70" @selection-change="selsChange">el-table-column>
<el-table-column label="序号" type="index" width="70">el-table-column>
<el-table-column prop="usualGrade" label="平时成绩">
<template slot-scope="scope">
<el-input type='number' v-model="scope.row.usualGrade" class="input" @blur="blurEvent(scope.row)">el-input>
template>
el-table-column>
<el-table-column prop="experimentGrade" label="实验成绩" width="200">
<template slot-scope="scope">
<el-input type='number' v-model="scope.row.experimentGrade" class="input" @blur="blurEvent(scope.row)">el-input>
template>
el-table-column>
<el-table-column prop="homeworkGrade" label="作业成绩">
<template slot-scope="scope">
<el-input type='number' v-model="scope.row.homeworkGrade" class="input" @blur="blurEvent(scope.row)">el-input>
template>
el-table-column>
<el-table-column prop="checkGrade" label="考勤成绩" width="200">
<template slot-scope="scope">
<el-input type='number' v-model="scope.row.checkGrade" class="input" @blur="blurEvent(scope.row)">el-input>
template>
el-table-column>
<el-table-column prop="midGrade" label="期中成绩">
<template slot-scope="scope">
<el-input type='number' v-model="scope.row.midGrade" class="input" @blur="blurEvent(scope.row)">el-input>
template>
el-table-column>
<el-table-column prop="finalGrade" label="期末成绩">
<template slot-scope="scope">
<el-input type='number' v-model="scope.row.finalGrade" class="input" @blur="blurEvent(scope.row)">el-input>
template>
el-table-column>
<el-table-column prop="total" label="总评成绩">
el-table-column>
el-table>
template>
javascript：
<script>
export default {
data() {
return {
tableData: [{
usualGrade: "1",
experimentGrade: "1",
homeworkGrade: "1",
checkGrade: "1",
midGrade: "1",
finalGrade:'1',
total: ''
}, {
usualGrade: "2",
experimentGrade: "2",
homeworkGrade: "2",
checkGrade: "2",
midGrade: "2",
finalGrade:'11',
total: ''
}, {
usualGrade: "3",
experimentGrade: "3",
homeworkGrade: "3",
checkGrade: "3",
midGrade: "3",
finalGrade:'9',
total: ''
}],
sels: [], //勾选复选框时获取整行数据
}
},
methods: {
//勾选时获得勾选数据
selsChange(sels) {
this.sels = sels
},
checkGrade(num){
//检测成绩的合法性
let grade = Number(num);
if(grade>100){
grade = 100;
}
if(grade<0){
grade = 0;
}
return grade;
},
blurEvent(row) {
row.usualGrade = this.checkGrade(row.usualGrade);
row.experimentGrade = this.checkGrade(row.experimentGrade);
row.homeworkGrade = this.checkGrade(row.homeworkGrade);
row.checkGrade = this.checkGrade(row.checkGrade);
row.midGrade = this.checkGrade(row.midGrade);
row.finalGrade = this.checkGrade(row.finalGrade);
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
row.total = Number(row.usualGrade) +Number(row.experimentGrade)+Number(row.homeworkGrade)+Number(row.checkGrade)+Number(row.midGrade)+Number(row.finalGrade);
},
}
}
script>
style:
<style>
/*//修改input的样式，为了不覆盖本组件其他处的样式，需要自定义一个类名*!*/
.input .el-input__inner {
border: none;
background: transparent;
text-align: center;
}
.el-table th>.cell {
text-align: center;
}
.el-table .cell {
text-align: center;
}
style>
2.内容讲解
数据绑定
绑定数据如下：
tableData: [{
usualGrade: "1",
experimentGrade: "1",
homeworkGrade: "1",
checkGrade: "1",
midGrade: "1",
finalGrade:'1',
total: ''
}, {
usualGrade: "2",
experimentGrade: "2",
homeworkGrade: "2",
checkGrade: "2",
midGrade: "2",
finalGrade:'11',
total: ''
}, {
usualGrade: "3",
experimentGrade: "3",
homeworkGrade: "3",
checkGrade: "3",
midGrade: "3",
finalGrade:'9',
total: ''
}]
<el-table-column prop="usualGrade" label="平时成绩">
<template slot-scope="scope">
<el-input type='number' v-model="scope.row.usualGrade" class="input" @blur="blurEvent(scope.row)">el-input>
template>
el-table-column>
表格中平时成绩这列绑定的是tableData的usualGrade值。
方法blurEvent(scope.row)是当表格的输入框失去焦点时调用的方法。
关键函数
设置成绩的范围0-100分
checkGrade(num){
//检测成绩的合法性
let grade = Number(num);
if(grade>100){
grade = 100;
}
if(grade<0){
grade = 0;
}
return grade;
}
计算总成绩并提交。
blurEvent(row) {
row.usualGrade = this.checkGrade(row.usualGrade);
row.experimentGrade = this.checkGrade(row.experimentGrade);
row.homeworkGrade = this.checkGrade(row.homeworkGrade);
row.checkGrade = this.checkGrade(row.checkGrade);
row.midGrade = this.checkGrade(row.midGrade);
row.finalGrade = this.checkGrade(row.finalGrade);
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
//计算总评分
row.total = Number(row.usualGrade) +Number(row.experimentGrade)+Number(row.homeworkGrade)+Number(row.checkGrade)+Number(row.midGrade)+Number(row.finalGrade);
//最后调用axios异步提交
//......
}
总结
通过以上的设置，基本完成了在表格中输入相关成绩并自动计算总评成绩。也完成了一些细节的设置，比如限制成绩的输入范围0-100，失去焦点完成时自动提交。
附录
完整代码
<template>
<el-table ref="multipleTable" border stripe :data="tableData" tooltip-effect="dark" @selection-change="selsChange" style="width: 100%;margin-top: 30px">
<el-table-column type="selection" width="70" @selection-change="selsChange">el-table-column>
<el-table-column label="序号" type="index" width="70">el-table-column>
<el-table-column prop="usualGrade" label="平时成绩">
<template slot-scope="scope">
<el-input type='number' v-model="scope.row.usualGrade" class="input" @blur="blurEvent(scope.row)">el-input>
template>
el-table-column>
<el-table-column prop="experimentGrade" label="实验成绩" width="200">
<template slot-scope="scope">
<el-input type='number' v-model="scope.row.experimentGrade" class="input" @blur="blurEvent(scope.row)">el-input>
template>
el-table-column>
<el-table-column prop="homeworkGrade" label="作业成绩">
<template slot-scope="scope">
<el-input type='number' v-model="scope.row.homeworkGrade" class="input" @blur="blurEvent(scope.row)">el-input>
template>
el-table-column>
<el-table-column prop="checkGrade" label="考勤成绩" width="200">
<template slot-scope="scope">
<el-input type='number' v-model="scope.row.checkGrade" class="input" @blur="blurEvent(scope.row)">el-input>
template>
el-table-column>
<el-table-column prop="midGrade" label="期中成绩">
<template slot-scope="scope">
<el-input type='number' v-model="scope.row.midGrade" class="input" @blur="blurEvent(scope.row)">el-input>
template>
el-table-column>
<el-table-column prop="finalGrade" label="期末成绩">
<template slot-scope="scope">
<el-input type='number' v-model="scope.row.finalGrade" class="input" @blur="blurEvent(scope.row)">el-input>
template>
el-table-column>
<el-table-column prop="total" label="总评成绩">
el-table-column>
el-table>
template>
<script>
export default {
data() {
return {
tableData: [{
usualGrade: "1",
experimentGrade: "1",
homeworkGrade: "1",
checkGrade: "1",
midGrade: "1",
finalGrade:'1',
total: ''
}, {
usualGrade: "2",
experimentGrade: "2",
homeworkGrade: "2",
checkGrade: "2",
midGrade: "2",
finalGrade:'11',
total: ''
}, {
usualGrade: "3",
experimentGrade: "3",
homeworkGrade: "3",
checkGrade: "3",
midGrade: "3",
finalGrade:'9',
total: ''
}],
sels: [], //勾选复选框时获取整行数据
}
},
methods: {
//勾选时获得勾选数据
selsChange(sels) {
this.sels = sels
},
checkGrade(num){
//检测成绩的合法性
let grade = Number(num);
if(grade>100){
grade = 100;
}
if(grade<0){
grade = 0;
}
return grade;
},
blurEvent(row) {
row.usualGrade = this.checkGrade(row.usualGrade);
row.experimentGrade = this.checkGrade(row.experimentGrade);
row.homeworkGrade = this.checkGrade(row.homeworkGrade);
row.checkGrade = this.checkGrade(row.checkGrade);
row.midGrade = this.checkGrade(row.midGrade);
row.finalGrade = this.checkGrade(row.finalGrade);
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
row.total = Number(row.usualGrade) +Number(row.experimentGrade)+Number(row.homeworkGrade)+Number(row.checkGrade)+Number(row.midGrade)+Number(row.finalGrade);
},
}
}
script>
<style>
/*//修改input的样式，为了不覆盖本组件其他处的样式，需要自定义一个类名*!*/
.input .el-input__inner {
border: none;
background: transparent;
text-align: center;
}
.el-table th>.cell {
text-align: center;
}
.el-table .cell {
text-align: center;
}
style>