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

实现可编辑表格可以使用 ElementUI 的 el-table 和 el-input 组件结合使用，具体的代码实现可以参考以下示例：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" prop="name">
        <template slot-scope="{ row }">
          <el-input v-model="row.name" :disabled="!row.edit"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="年龄" prop="age">
        <template slot-scope="{ row }">
          <el-input v-model="row.age" :disabled="!row.edit"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="地址" prop="address">
        <template slot-scope="{ row }">
          <el-input v-model="row.address" :disabled="!row.edit"></el-input>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="{ row }">
          <el-button type="primary" v-if="!row.edit" @click="editRow(row)">编辑</el-button>
          <el-button type="success" v-if="row.edit" @click="saveRow(row)">保存</el-button>
          <el-button type="danger" v-if="row.edit" @click="cancelEdit(row)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addRow">新增</el-button>
    <el-button type="success" @click="saveTableData">保存</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          address: '北京市海淀区'
        },
        {
          name: '李四',
          age: 25,
          address: '上海市浦东区'
        },
        {
          name: '王五',
          age: 30,
          address: '广州市天河区'
        }
      ]
    }
  },
  methods: {
    editRow(row) {
      row.edit = true
    },
    saveRow(row) {
      row.edit = false
    },
    cancelEdit(row) {
      row.edit = false
    },
    addRow() {
      this.tableData.push({
        name: '',
        age: '',
        address: '',
        edit: true
      })
    },
    saveTableData() {
      const data = JSON.stringify(this.tableData)
      // 发送数据给后端
      console.log(data)
    }
  }
}
</script>

在上面的代码中，我们使用 el-table-column 的 slot-scope 属性来自定义表格单元格的内容，其中 el-input 组件用来实现可编辑内容的输入，同时使用 v-model 指令来绑定数据。在最后两个 el-button 按钮中，一个用来新增表格行，一个用来保存表格数据，保存数据时，我们可以将表格数据转换成 JSON 格式的字符串后发送给后端。