学生列表 - 可编辑表格 - 常规

<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>
				</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);
			}
		}
	})
</script>