el-table双击修改一行

### 实现双击行编辑功能

为了实现在 `el-table` 中双击行进行编辑的功能，可以采用如下方法：

当用户双击某一行时触发特定逻辑来切换该行进入编辑模式。此过程涉及监听双击事件并处理相应的行为。具体来说，在 Vue 和 Element UI 的环境中，可以通过自定义组件的方法实现这一需求。

#### 方法一：基于已有代码片段改进

考虑到提供的代码示例[^1]，可以在原有基础上做适当调整以支持整行编辑而非仅限于单个单元格。主要思路是在每次双击不同行之前先保存当前正在编辑的数据项，并在必要时更新这些数据项的状态。

methods: {
    rowDblclick2(row, column) {
        this.isEditSplitBtn = true;
        this.isDoubleClick = true;

        // 如果新选中的行不同于上次记录的行，则执行以下操作
        if (row.index !== this.index2) {

            // 判断前一次是否有未完成的编辑动作
            if (this.isCurrentRow2EditFlag){
                let price = /* 计算新的价格 */;
                this.$set(this.beforeCheckRow2, "billAmount", price);
            }

            // 更新当前被编辑的行以及其索引
            this.beforeCheckRow2 = Object.assign({}, row);  // 复制对象以防直接修改原始数据
            this.isCurrentRow2EditFlag = true;
            this.$set(this.isEditSplit, this.index2, false);

            // 设置最新的编辑目标行为当前行
            this.index2 = row.index;
            this.$set(this.isEditSplit, this.index2, true);
        }
        
        // 开启编辑状态
        this.editingRowIndex = row.index;  
    },
    
    // 添加用于结束编辑的方法
    finishEditing() {
        delete this.editingRowIndex;
        // 这里还可以加入提交更改到服务器或其他业务逻辑
    }
}

上述代码实现了对整个行的编辑控制机制，其中包含了开启和关闭编辑态的过程管理。需要注意的是，这里假设每行都有唯一的 `index` 属性作为标识符以便追踪哪一行处于编辑状态下。

#### 方法二：简化版方案

如果不需要复杂的多字段联动变更逻辑，可以直接利用简单的标记位来进行基本的行级编辑开关控制。这种方式更加简洁明了，适合初学者理解和应用。

<template>
  <el-table :data="tableData" style="width: 100%" @row-dblclick="handleRowDbClick">
      <!-- 假设有一个名为name的列 -->
      <el-table-column prop="name" label="Name"></el-table-column>

      <!-- 更多列... -->

      <!-- 编辑按钮所在的列 -->
      <el-table-column fixed="right" width="180px">
          <template slot-scope="{ row }">
              <div v-if="editingRow === row.id">
                  <el-input v-model="tempRow.name"/>
                  <el-button type="primary" size="small" @click="saveEdit">Save</el-button>
              </div>
              <span v-else>{{ row.name }}</span>
          </template>
      </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    return {
      tableData: [], // 表格数据源
      editingRow: null,
      tempRow: {}
    };
  },

  methods: {
    handleRowDbClick (row) {
      this.tempRow = JSON.parse(JSON.stringify(row)); // 创建副本防止污染原数据
      this.editingRow = row.id || Math.random().toString(36).substr(-8); // 使用随机字符串模拟id
    },

    saveEdit () {
      const index = this.tableData.findIndex(item => item.id === this.editingRow);
      if (~index) {
        this.$set(this.tableData, index, {...this.tempRow});
      }
      this.editingRow = null;
    }
  }
};
</script>

这段代码展示了如何通过双击激活指定行内的输入框供用户编辑，并提供了一个保存按钮让用户确认他们的改动。一旦点击保存，就会把临时存储的新值覆盖回实际的数据列表中去。