Vue Element UI 表格编辑功能实现 - 如何保存编辑内容 - 常规

在编辑内容后不能保存内容的原因是因为在代码中没有添加保存编辑内容的函数。可以在'editRow'方法中添加保存编辑内容的逻辑。

修改后的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title></title>
		<script src='js/vue.js' type='text/javascript' charset='utf-8'></script>
		<!-- 引入axios -->
		<script src='https://cdn.staticfile.org/axios/0.18.0/axios.min.js'></script>
		<!-- 引入Qs，解决post参数问题 -->
		<script src='https://cdn.bootcss.com/qs/6.5.1/qs.min.js'></script>
		<!-- 引用element-ui样式 -->
		<!-- 引入样式 -->
		<link rel='stylesheet' href='https://unpkg.com/element-ui/lib/theme-chalk/index.css'>
		<!-- 引入组件库 -->
		<script src='https://unpkg.com/element-ui/lib/index.js'></script>
	</head>
	<body>
		<div id='app'>
			<el-table :data='tableData' border style='width: 100%'>
				<el-table-column fixed prop='number' label='学号' width='100'></el-table-column>
				<el-table-column prop='name' label='姓名' width='120'>
					<template slot-scope='scope'>
						<el-input v-model='scope.row.name' v-if='scope.row.editable'></el-input>
						<div v-else>{{ scope.row.name }}</div>
					</template>
				</el-table-column>
				<el-table-column prop='age' label='年龄' width='120'>
					<template slot-scope='scope'>
						<el-input v-model='scope.row.age' v-if='scope.row.editable'></el-input>
						<div v-else>{{ scope.row.age }}</div>
					</template>
				</el-table-column>
				<el-table-column prop='email' label='邮箱' width='130'>
					<template slot-scope='scope'>
						<el-input v-model='scope.row.email' v-if='scope.row.editable'></el-input>
						<div v-else>{{ scope.row.email }}</div>
					</template>
				</el-table-column>
				<el-table-column prop='right' label='操作' width='130'>
					<template slot-scope='scope'>
						<el-button type='primary' icon='el-icon-edit' circle @click='editRow(scope.row)'></el-button>
						<el-button type='danger' icon='el-icon-delete' circle @click='deleteRow(scope.row)'></el-button>
						<el-button type='primary' icon='el-icon-check' circle v-if='scope.row.editable' @click='saveRow(scope.row)'></el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: {
				tableData: [],
			},
			created() {
				axios.get('http://rap2api.taobao.org/app/mock/238982/students')
					.then(response => {
						this.tableData = response.data.students.map((student, index) => {
							return {
								number: index + 1,
								name: student.name,
								age: student.age,
								email: student.email,
								editable: false // 新增editable字段，表示是否可编辑
							};
						});
					})
					.catch(error => {
						console.error('获取学生列表数据失败:', error);
					});
			},
			methods: {
				editRow(row) {
					row.editable = true; // 将被点击的行设置为可编辑状态
				},
				deleteRow(row) {
					console.log('删除行', row);
					const index = this.tableData.indexOf(row);
					this.tableData.splice(index, 1);
				},
				saveRow(row) {
					row.editable = false; // 将被保存的行设置为不可编辑状态
					// 发送保存编辑内容的请求
					axios.post('http://rap2api.taobao.org/app/mock/238982/save', row)
						.then(response => {
							console.log('保存成功');
						})
						.catch(error => {
							console.error('保存失败:', error);
						});
				}
			}
		})
	</script>
</html>

在上述代码中，我们在el-table-column的操作列中添加了一个保存按钮，当点击保存按钮时，会调用'saveRow'方法进行保存操作。在'saveRow'方法中，将被保存的行设置为不可编辑状态，并发送保存编辑内容的请求。根据实际需求，可以修改保存编辑内容的请求地址和参数。