el-table点击按钮行编辑

要实现在 `el-table` 中点击按钮进行行编辑，您可以按照以下步骤操作：

1. 首先，在您的表格中添加一个列，用于显示编辑按钮。您可以使用 `scoped slot` 来自定义列的内容。例如：

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
  </template>
</el-table-column>

2. 然后，创建一个方法 `handleEdit`，该方法将触发行编辑的逻辑。在该方法中，您可以通过修改数据源中相应行的属性来切换编辑状态。例如：

methods: {
  handleEdit(row) {
    row.editable = true; // 添加一个表示可编辑状态的属性
  }
}

3. 接下来，您可以使用 `scoped slot` 来根据行的编辑状态显示不同的内容。例如，在单元格中显示不同的输入框或文本框。您可以根据需求使用 `v-if` 或 `v-show` 控制元素的显示与隐藏。例如：

<el-table-column label="姓名">
  <template slot-scope="scope">
    <span v-if="!scope.row.editable">{{ scope.row.name }}</span>
    <el-input v-else v-model="scope.row.name"></el-input>
  </template>
</el-table-column>

4. 最后，您可以添加保存或取消按钮，用于保存或取消对行数据的编辑。同样，您可以使用 `scoped slot` 来自定义列的内容。例如：

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button v-if="scope.row.editable" type="success" size="small" @click="handleSave(scope.row)">保存</el-button>
    <el-button v-else type="danger" size="small" @click="handleCancel(scope.row)">取消</el-button>
  </template>
</el-table-column>

请注意，在 `handleSave` 方法中，您需要将修改后的数据保存到后端或修改您的数据源，具体操作根据您的需求而定。

这样，当您点击编辑按钮时，相应行的状态将切换为编辑状态，并显示相应的输入框或文本框。您可以在输入框中进行编辑，并通过保存或取消按钮来确认或取消编辑。