element table表格实现编辑并后台提交数据

要实现element table表格的编辑并后台提交数据，你可以按照以下步骤进行：

1. 在表格中添加编辑按钮，点击后进入编辑状态。
2. 在列属性中设置可编辑属性，这样在编辑状态下可以直接在表格中修改数据。
3. 添加保存按钮，在点击保存按钮时，获取表格中修改后的数据，将数据提交到后台进行保存。
4. 可以使用axios等工具库进行数据的发送和接收。

下面是一个简单的代码示例：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" :editable="true"></el-table-column>
      <el-table-column prop="age" label="年龄" :editable="true"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="handleSubmit">保存</el-button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 }
      ],
      editIndex: -1
    };
  },
  methods: {
    handleEdit(index) {
      this.editIndex = index;
    },
    handleSubmit() {
      if (this.editIndex >= 0) {
        // 获取编辑后的数据
        const editedData = this.tableData[this.editIndex];
        // 发送数据到后台保存
        axios.post('/api/saveData', editedData).then(() => {
          // 保存成功后取消编辑状态
          this.editIndex = -1;
        });
      }
    }
  }
};
</script>

在这个示例中，我们使用了element table组件，设置了两列为可编辑属性，并在操作栏中添加了一个编辑按钮。点击编辑按钮后，会进入编辑状态，此时可以直接在表格中修改数据。点击保存按钮后，会将编辑后的数据提交到后台进行保存。