vue elementui实现可编辑表格 点击上方编辑按钮 编辑完表格数据 再点保存按钮把数据发送给后端 数据怎么绑定

在 Vue 中使用 ElementUI 实现可编辑表格，可以通过以下几个步骤实现：

1. 在 Vue 组件中引入 ElementUI 的表格组件和按钮组件。可以使用 `el-table` 实现表格，使用 `el-button` 实现按钮。

2. 在 `data` 中定义表格的数据源，以及保存编辑状态的变量。例如，定义一个 `tableData` 数组来保存表格的数据，定义一个 `editIndex` 变量来保存当前编辑的行的索引。

3. 在表格中添加一个列，用于显示编辑按钮。该列的 `slot` 属性可以设置为 `header`，表示该列是表头，且表头内容由自定义模板来渲染。在自定义模板中，可以添加一个按钮来触发编辑操作。

4. 添加编辑操作的方法。当点击编辑按钮时，将当前行的索引保存到 `editIndex` 变量中。在表格中的每一行中，可以通过 `v-if` 指令来判断当前行是否处于编辑状态，从而决定是否显示编辑框。

5. 添加保存操作的方法。当点击保存按钮时，将编辑后的数据发送给后端，同时将 `editIndex` 变量重置为 `-1`，表示当前不处于编辑状态。

代码示例：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <<el-table-column label="操作">
        <template slot="header">
          <el-button type="primary" @click="handleAdd">添加</el-button>
        </template>
        <template slot-scope="scope">
          <el-button v-if="editIndex !== scope.$index" @click="handleEdit(scope.$index)">编辑</el-button>
          <el-button v-else @click="handleSave(scope.$index)">保存</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      editIndex: -1
    };
  },
  methods: {
    handleAdd() {
      this.tableData.push({ name: '', age: '' });
    },
    handleEdit(index) {
      this.editIndex = index;
    },
    handleSave(index) {
      const editedData = this.tableData[index];
      // 将编辑后的数据发送给后端
      console.log('保存数据:', editedData);
      this.editIndex = -1;
    }
  }
};
</script>

在上面的代码示例中，编辑按钮的显示与隐藏通过 `v-if` 指令来实现。当 `editIndex` 等于当前行的索引时，显示保存按钮；否则，显示编辑按钮。编辑后的数据可以通过表格的 `data` 属性来绑定。当数据发生变化时，表格会自动重渲染。