【VUE】点击编辑按钮修改表格当前行内容，然后保存提交到接口

要实现点击编辑按钮修改表格当前行的内容，并将修改后的数据保存提交到接口，你可以按照以下步骤进行操作：

1. 首先，在 Vue 组件中，将 el-table-column 中的某一列的内容改为可编辑的形式。你可以使用一个变量来控制是否显示编辑状态。

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column label="Actions">
        <template slot-scope="scope">
          <el-button v-if="!scope.row.editable" @click="handleEdit(scope.row)">Edit</el-button>
          <el-button v-else @click="handleSave(scope.row)">Save</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, editable: false },
        { name: 'Jane', age: 30, editable: false },
        { name: 'Bob', age: 35, editable: false }
      ]
    };
  },
  methods: {
    handleEdit(row) {
      row.editable = true;
    },
    handleSave(row) {
      // 发送数据到后台保存
      console.log(row);
      
      // 保存成功后，将 editable 设置为 false，退出编辑状态
      row.editable = false;
    }
  }
};
</script>

2. 在上述代码中，我们添加了一个 Actions 列，其中包含 Edit 和 Save 两个按钮。在每一行中，通过 `editable` 属性来控制是否显示编辑状态。

3. 点击 Edit 按钮时，调用 `handleEdit` 方法，将对应行的 `editable` 设置为 true，从而显示编辑状态。

4. 点击 Save 按钮时，调用 `handleSave` 方法，将对应行的数据发送到后台进行保存。你可以在这里使用 axios 或其他方式发送 HTTP 请求。

5. 在保存成功后，将对应行的 `editable` 设置为 false，退出编辑状态。

请根据你的实际需求进行适当的修改和扩展。希望对你有所帮助！