当前位置：首页 > article >正文

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

article 2024/9/28 21:15:13

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