Vue ElementUI table实现双击修改编辑某个内容的方法

<el-table @cell-dblclick="handleCellDblClick"

<el-table-column prop="name" label="姓名" width="180">
      <template slot-scope="scope">
        <span v-if="editableData !== scope.row">{{ scope.row.name }}</span>
        <el-input
          v-else
          :ref="'input-' + scope.$index"
          v-model="scope.row.name"
          @blur="handleInputBlur(scope.row)"
          @keyup.enter.native="handleInputEnter(scope.row)"
        ></el-input>
      </template>
    </el-table-column>

editableData: null, // 当前编辑的数据项

// 双击时触发
handleCellDblClick(row, column, cell, event) {
  if (column.property === 'customerBoxNum') {
    this.editableData = row; // 设置当前编辑的数据项
    this.$nextTick(() => {
      const inputRef = 'input-' + this.boxList.indexOf(row);
      const inputElement = this.$refs[inputRef];
      if (inputElement) {
        inputElement.focus(); // 聚焦输入框
      } else {
        console.error('Input element not found:', inputRef);
      }
    });
  }
},
handleInputBlur(row) {
  // 输入框失去焦点时保存更改
  this.editableData = null; // 返回到静态显示状态
},
handleInputEnter(row) {
  // 按下回车键时保存更改
  this.editableData = null; // 返回到静态显示状态
},