el-table 单元格，双击编辑

el-table 单元格，双击编辑

实现效果

代码如下

<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="name" label="姓名" width="180"><template slot-scope="scope"><div @dblclick="editCell(scope, 'name')" style="cursor: pointer;"><span v-if="!isEditingCell || editingCell.row !== scope.row || editingCell.field !== 'name'">{{ scope.row.name }}</span><el-inputv-elsev-model="editingCell.value"@blur="saveEdit(scope.row, 'name')"@keydown.enter="saveEdit(scope.row, 'name')"size="small"style="width: 100px;"/></div></template></el-table-column><el-table-column prop="age" label="年龄" width="180"><template slot-scope="scope"><div @dblclick="editCell(scope, 'age')" style="cursor: pointer;"><span v-if="!isEditingCell || editingCell.row !== scope.row || editingCell.field !== 'age'">{{ scope.row.age }}</span><el-inputv-elsev-model="editingCell.value"@blur="saveEdit(scope.row, 'age')"@keydown.enter="saveEdit(scope.row, 'age')"size="small"style="width: 100px;"/></div></template></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{ name: 'John', age: 25 },{ name: 'Jane', age: 30 },{ name: 'Doe', age: 28 },],isEditingCell: false,editingCell: {row: null,field: null,value: null,},};},methods: {editCell(scope, field) {this.isEditingCell = true;this.editingCell.row = scope.row;this.editingCell.field = field;this.editingCell.value = scope.row[field]; // 将原有的值赋给编辑单元格},saveEdit(row, field) {row[field] = this.editingCell.value;  // 将输入的值保存回原数据this.isEditingCell = false;this.editingCell.row = null;this.editingCell.field = null;this.editingCell.value = null; // 清空编辑值},},
};
</script><style scoped>
/* 自定义样式 */
</style>

如果值为空无法点击无效的话，可以设置<span>的样式 style="display: inline-block ;

<span v-if="!isEditingCell || editingCell.row !== scope.row || editingCell.field !== 'age'" style="display: inline-block ;>{{ scope.row.age }}</span>

这样就不会遇到值为空，但是无法显示的情况了

具体的内容大家可以根据实际需要调整！