el-table 单元格，双击编辑

el-table 单元格，双击编辑

实现结果

代码如下

1. <template>
2.   <el-table :data="tableData" style="width: 100%">
3.     <el-table-column prop="name" label="姓名" width="180">
4.       <template slot-scope="scope">
5.         <div @dblclick="editCell(scope, 'name')" style="cursor: pointer;">
6.           <span v-if="!isEditingCell || editingCell.row !== scope.row || editingCell.field !== 'name'">
7.             {{ scope.row.name }}
8.           </span>
9.           <el-input
10.             v-else
11.             v-model="editingCell.value"
12.             @blur="saveEdit(scope.row, 'name')"
13.             @keydown.enter="saveEdit(scope.row, 'name')"
14.             size="small"
15.             style="width: 100px;"
16.           />
17.         </div>
18.       </template>
19.     </el-table-column>
21.     <el-table-column prop="age" label="年龄" width="180">
22.       <template slot-scope="scope">
23.         <div @dblclick="editCell(scope, 'age')" style="cursor: pointer;">
24.           <span v-if="!isEditingCell || editingCell.row !== scope.row || editingCell.field !== 'age'">
25.             {{ scope.row.age }}
26.           </span>
27.           <el-input
28.             v-else
29.             v-model="editingCell.value"
30.             @blur="saveEdit(scope.row, 'age')"
31.             @keydown.enter="saveEdit(scope.row, 'age')"
32.             size="small"
33.             style="width: 100px;"
34.           />
35.         </div>
36.       </template>
37.     </el-table-column>
38.   </el-table>
39. </template>
41. <script>
42. export default {
43.   data() {
44.     return {
45.       tableData: [
46.         { name: 'John', age: 25 },
47.         { name: 'Jane', age: 30 },
48.         { name: 'Doe', age: 28 },
49.       ],
50.       isEditingCell: false,
51.       editingCell: {
52.         row: null,
53.         field: null,
54.         value: null,
55.       },
56.     };
57.   },
58.   methods: {
59.     editCell(scope, field) {
60.       this.isEditingCell = true;
61.       this.editingCell.row = scope.row;
62.       this.editingCell.field = field;
63.       this.editingCell.value = scope.row[field]; // 将原有的值赋给编辑单元格
64.     },
65.     saveEdit(row, field) {
66.       row[field] = this.editingCell.value;  // 将输入的值保存回原数据
67.       this.isEditingCell = false;
68.       this.editingCell.row = null;
69.       this.editingCell.field = null;
70.       this.editingCell.value = null; // 清空编辑值
71.     },
72.   },
73. };
74. </script>
76. <style scoped>
77. /* 自定义样式 */
78. </style>

复制代码

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

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

复制代码

如许就不会碰到值为空，但是无法表现的环境了
详细的内容各人可以根据现实必要调解！