Vue ElemetUI table实现双击修改编辑某个内容

1、使用@cell-dblclick事件，当双击时触发事件

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

2、单元格设置

主要重点为判断双击时切换input框，然后绑定ref，设置失去焦点时触发点方法，与按enter键触发点方法

<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>

3、添加当前编辑的数据

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

4、为所有的方法赋予逻辑

// 双击时触发
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; // 返回到静态显示状态
},

5、打完收工

原文地址：https://blog.csdn.net/qq_48817343/article/details/142483118

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！