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-input
            v-else
            v-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-input
            v-else
            v-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>

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

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