Vue.js Element UI 表格编辑功能：回车键保存修改
To allow users to save the edited content by pressing the Enter key, you can add an event listener for the keyup event on the input fields. When the Enter key is pressed, you can save the changes and set the 'editable' property of the row to false.
Here's an updated version of your code that includes this functionality:
<!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' @keyup.enter='saveRow(scope.row)'></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' @keyup.enter='saveRow(scope.row)'></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' @keyup.enter='saveRow(scope.row)'></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);
},
saveRow(row) {
row.editable = false; // 设置行为不可编辑状态
}
}
})
</script>
</html>
In this updated code, the @keyup.enter event listener is added to the input fields. When the Enter key is pressed, the saveRow method is called, which sets the 'editable' property of the row to false, making it not editable anymore.
原文地址: https://www.cveoy.top/t/topic/plvW 著作权归作者所有。请勿转载和采集!