el-table可编辑表格，实现输入数据检验，且失去焦点即修改成功。

已于 2022-10-03 20:23:50 修改
阅读量2.7k 收藏 9
点赞数 1
分类专栏： JavaWeb 文章标签： vue.js 前端 javascript
于 2022-10-03 20:22:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/W18237579818/article/details/127155296
版权

提示：本博客为开发过程中的日常记录，读者可自行使用，并在此基础上完善。感谢支持。

文章目录

前言

提示：创作背景

在完成大四综合实践的过程中，需要一个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>
el-table实现可编辑表格
Suzerk的博客
09-20 9744
实现el-table的可编辑表格如图所示： 以下展示部分代码： <el-table-column label="价格" min-width="20" align="center"> <template slot-scope="scope"> <el-input v-if="scope.row.edit" v-model="scope.row.price"
vue 可编辑表格，实现 ElementUI 编辑 table，增删改查 Grid，vue编辑 table，elx-table、elx-editable...
chunhuangyin2649的博客
06-06 7198
最新版本见 vue-element-extends （可能这应该是目前最优的一种实现方式了吧） Vue + ElementUI 2.x 实现的可编辑表格组件，支持渲染任意组件、动态列，增删改查等操作； 保持 ElTable 一致的风格，弥补了 ElTable 可编辑表格功能的不足，兼容 ElT...
el-table表格可编辑
dy1717的博客
08-18 1672
el-table表格行编辑功能
el-select失去焦点（@blur）事件异常处理
最新发布
weixin_61211370的博客
04-14 456
el-select失去焦点（@blur）事件异常处理
可编辑的el-table表格
GardJasmin的博客
10-10 4473
可编辑的el-table表格，可以结合input输入框，select选择框，tree树形结构等。实现序列递增，删除的序列不会再出现。
el-table 实现可编辑表格
zhangxinrongr的博客
11-16 4455
【代码】el-table 实现可编辑表格。
el-table 中实现表格可编辑
热门推荐
hongtoushan的博客
02-26 5万+
vue-elementUI-可编辑的表格 表格上绑定的事件函数请参考elementUI官方文档 场景一：整行编辑 鼠标移入单元格的时候，单元格所在行中所有可编辑的单元格全部进入编辑状态。 vue组件 <template> <div> <el-table :data="tableData" size="mini" style="width: 100%" @cell-mouse-enter="handleCellEnter
vue el-table 验证
02-10
对于某些特定场景下可能不需要整张表作为单一表单项的情况，则可以在每个可编辑单元格内部自行加入简单的正则表达式或其他形式的数据合法性判断。 ```javascript // 假设我们在某一行某一列设置了 input 输入框， ...
elementui table在返回数据显示后，可编辑表格内容，vue如何实现
03-20
好的，我现在需要帮助用户解决在 Vue 中使用 ElementUI 的 el-table 实现可编辑表格的问题。用户想要最佳实践和示例代码，所以我得先回想一下 ElementUI 的文档和相关实现方法。 首先，ElementUI 的 el-table 组件...
<el-table :data="tableData" style="width: 100%" border @cell-dblclick="handleCellDblClick"> <el-table-column fixed prop="type" label="类别" width="120"> <template slot-scope="scope"> <div v-if="scope.row.isEdit" contenteditable="true" @blur="handleBlur(scope.row, $event)" @input="scope.row.type = $event.target.innerText">{{ scope.row.type }}</div> <span v-else @dblclick="handleCellDblClick(scope.row, scope.column)">{{ scope.row.type }}</span> </template> </el-table-column> <el-table-column prop="talentTarget" label="培养目标" width="200"> <template slot-scope="scope"> <div v-if="scope.row.isEdit" contenteditable="true" @blur="handleBlur(scope.row, $event)" @input="scope.row.talentTarget = $event.target.innerText">{{ scope.row.talentTarget }}</div> <span v-else @dblclick="handleCellDblClick(scope.row, scope.column)">{{ scope.row.talentTarget }}</span> </template> </el-table-column> <el-table-column prop="task" label="培养任务" width="200"> <template slot-scope="scope"> <div v-if="scope.row.isEdit" contenteditable="true" @blur="handleBlur(scope.row, $event)" @input="scope.row.task = $event.target.innerText">{{ scope.row.task }}</div> <span v-else @dblclick="handleCellDblClick(scope.row, scope.column)">{{ scope.row.task }}</span> </template> </el-table-column> <el-table-column width="120" prop="weight" label="權重"> <template slot-scope="scope"> <div v-if="scope.row.isEdit" contenteditable="true" @blur="handleBlur(scope.row, $event)" @input="scope.row.weight = $event.target.innerText">{{ scope.row.weight }}</div> <span v-else @dblclick="handleCellDblClick(scope.row, scope.column)">{{ scope.row.weight }}</span> </template> </el-table-column> <el-table-column width="120" prop="process" label="达成进度"> <template slot-scope="scope">
03-20
还需要注意，在保存数据时，直接修改Vue的响应式数据，通常是通过Vue.set或者直接修改数组元素，但要注意数组变更检测的注意事项，可能需要使用splice方法或者Vue.set来确保视图更新。 最后，测试示例代码，确保...
element可编辑表格的表单校验
02-19
Element UI 的可编辑表格结合表单校验功能可以让你在用户输入数据的时候进行实时验证，确保数据的有效性和完整性。下面是一个简单的介绍和实现步骤： ### 表格行内编辑及表单项校验 1. **引入必要的组件** 首先...
vue el-table实现行内编辑功能
01-19
最近做一个vue前后端分离的项目，前端框架用element ui，在 使用 el-table 的过程中，需要实现行内编辑，效果大概是这样： 分为下面几个步骤： （1） 自定义 el-table 的表头（即添加 “新增” 按钮）： handleAdd || data.name.toLowerCase().includes(handleAdd.toLowerCase())) highlight-current-row border> <template s
使用ElementUI中的el-table制作可编辑的表格
羽木落凡的博客
11-26 4064
在前端开发时，可能会需要用到可编辑的表格控件。一些原生的UI框架并不支持Table控件的可编辑功能，所以只能自己实现。
简单的实现el-table表格可编辑
qq_37759901的博客
07-12 4172
【代码】简单的实现el-table表格可编辑。
el-table 可编辑表格
weixin_62372204的博客
06-14 604
实现一个对表格新增行、删除行，表格单元格点击进行文本和输入控件的切换
实现＜el-table＞表格内可编辑（多列）
weixin_56516864的博客
03-25 2140
第一，点击单元格时变成可输入状态，离开单元格或者.enter时提交数据，变成不可输入状态；第二，el-input最好自动获取焦点，失焦时变成不可输入状态；第三，每个可编辑的列匹配一个是否在编辑状态的字段；el-table编辑多列。
el-table 表格封装并改造实现单元格可编辑
忙碌小鱼的博客
02-23 3259
表格组件的时候频繁的引用，相同的业务代码反复，所以萌生了要简易封装一下的想法，做项目的过程中又有了表格单元格可编辑的需求，因此总结记录一下实现过程。
el-table 实现单元格内编辑功能
weixin_46677214的博客
11-22 7400
el-table 实现单元格内编辑功能 功能 双击单元格出现编辑框，编辑框失去焦点后保存内容。 原理 通过v-if控制编辑框与显示值显示和隐藏。 通过el-table 组件·的cell-dblclick事件，得到row、column的数据，并且显示编辑框，隐藏显示值。 通过el-input组件的blur隐藏编辑框。 步骤 1.显示编辑框，聚焦编辑框 显示编辑框 column.property是当前的template中el-table-column所填写的property值 row[column.
el-table可编辑，加校验
qq_42401946的博客
12-08 7097
一、点击保存对整个table校验 <template> <div> <el-button type="success" @click="handleAdd()">添加一条数据</el-button> <el-form :model="ruleForm" ref="ruleForm"> <el-table :data="ruleForm.tableData" style="width: 100%">
el-table 可编辑
06-06
el-table 是 ElementUI 中的一个表格组件，如果想要实现可编辑功能，可以使用以下两种方式： 1. 使用 el-editable-table 组件 el-editable-table 组件是 ElementUI 中专门为表格编辑而设计的组件，可以轻松实现单元格编辑、行编辑和批量编辑等功能。 使用方法如下： 首先需要在页面中引入 el-editable-table 组件： ``` import ElEditableTable from 'el-editable-table' Vue.use(ElEditableTable) ``` 然后在 el-table 标签中使用 el-editable-table 组件即可： ``` <el-editable-table :data="tableData"> <el-table-column prop="name" label="姓名" :editable="true"></el-table-column> <el-table-column prop="age" label="年龄" :editable="true"></el-table-column> <el-table-column prop="sex" label="性别" :editable="true"></el-table-column> </el-editable-table> ``` 2. 自行编写编辑功能代码 如果不想使用 el-editable-table 组件，也可以自行编写代码实现表格编辑功能。具体实现方法如下： 首先在 el-table 标签中添加 :highlight-current-row="true" 属性，这样可以高亮当前行。 然后在 el-table-column 标签中添加 scoped-slot="default" 属性，用于自定义单元格内容。 接着在 methods 中添加 edit 方法，用于切换单元格为编辑状态。 最后在模板中使用 v-if 判断单元格是否为编辑状态，并根据情况显示不同的内容即可。 具体代码示例如下： ``` <el-table :data="tableData" :highlight-current-row="true"> <el-table-column prop="name" label="姓名" :formatter="nameFormatter" :editable="true" scoped-slot="default"></el-table-column> <el-table-column prop="age" label="年龄" :editable="true" scoped-slot="default"></el-table-column> <el-table-column prop="sex" label="性别" :editable="true" scoped-slot="default"></el-table-column> </el-table> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, sex: '男' }, { name: '李四', age: 22, sex: '女' }, { name: '王五', age: 25, sex: '男' } ], editCell: null } }, methods: { nameFormatter(row, column) { return this.editCell === `${row.name}-${column.property}` ? <el-input v-model={row[column.property]} size="mini" @blur={this.editCell = null}></el-input> : row[column.property]; }, edit(row, column) { this.editCell = `${row.name}-${column.property}`; this.$nextTick(() => { this.$refs[this.editCell][0].$refs.input.focus(); }); } } } </script> ``` 通过上述两种方式，都可以实现 el-table 可编辑的功能。具体选哪种方式，可以根据实际情况进行选择。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

』探索『

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值