VueJS-Element UI 实现表格单行可编辑功能的问题

我来帮你搞定这个单行编辑的问题～你现在遇到的核心问题是用了全局的isEdit变量，导致点击编辑按钮时所有行的输入框都会同步切换状态。要实现仅当前行独立控制编辑权限，我们需要给每一行数据添加专属的编辑状态字段，具体改法如下：

1. 给表格数据添加行级编辑状态 #

初始化表格数据时，给每一条数据新增一个isEditable字段，默认设为true（对应输入框默认禁用的状态）：

// 示例初始化代码
this.tableData = [
  { name: 'John Doe', address: '123 Main St', isEditable: true },
  { name: 'Jane Smith', address: '456 Oak Ave', isEditable: true },
  // 更多数据项...
];

2. 修改模板绑定与事件逻辑 #

把输入框的禁用状态绑定到当前行的isEditable字段，同时给编辑/保存按钮传递当前行的上下文，确保只操作目标行：

<el-table :data="tableData" style="width: 100%" stripe>
  <el-table-column label="Name">
    <template slot-scope="scope">
      <!-- 绑定当前行的isEditable控制禁用状态 -->
      <el-input v-model="scope.row.name" :disabled="scope.row.isEditable"></el-input>
    </template>
  </el-table-column>
  <el-table-column label="Address">
    <template slot-scope="scope">
      <el-input v-model="scope.row.address" :disabled="scope.row.isEditable"></el-input>
    </template>
  </el-table-column>
  <el-table-column label="Operations">
    <template slot-scope="scope">
      <!-- 仅当前行处于编辑状态时显示保存按钮 -->
      <el-button type="default" @click="handleSaveRow(scope.row)" v-show="!scope.row.isEditable">Save</el-button>
      <!-- 仅当前行处于禁用状态时显示编辑按钮 -->
      <el-button type="primary" @click="handleEditRow(scope.row)" v-show="scope.row.isEditable">Edit</el-button>
    </template>
  </el-table-column>
</el-table>

3. 实现点击事件的单行控制逻辑 #

在方法中接收当前行对象，直接修改它的isEditable属性即可：

methods: {
  handleEditRow(row) {
    row.isEditable = false; // 开启当前行编辑权限
  },
  handleSaveRow(row) {
    row.isEditable = true; // 保存后禁用当前行编辑
    // 这里可以添加数据提交到后端的逻辑
  }
}

这样修改后，点击某一行的「Edit」按钮只会激活当前行的输入框，点击「Save」则会恢复该行的禁用状态，完全符合你的预期需求～

内容的提问来源于stack exchange，提问作者dede.brahma