el-table动态添加新增一行并保存行 调用api接口保存

你可以使用 Element UI 的 `el-table` 的 `append` 方法来动态添加一行。然后，当你需要保存新增的行时，你可以调用 API 接口来将数据保存到服务器上。

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

<el-table :data="tableData" ref="table">
  <!-- 表格列定义 -->
</el-table>

<el-button @click="addRow">添加一行</el-button>
<el-button @click="saveRows">保存行</el-button>

export default {
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    addRow() {
      this.tableData.push({});
      this.$nextTick(() => {
        const len = this.tableData.length;
        this.$refs.table.setCurrentRow(this.tableData[len - 1]);
      });
    },
    saveRows() {
      const newData = this.tableData.filter(item => item.id === undefined); // 过滤出新增的数据
      // 调用 API 接口保存数据，示例代码如下
      this.$http.post('/api/save', newData).then(res => {
        // 保存成功后，更新表格数据
        this.tableData = this.tableData.filter(item => item.id !== undefined);
        this.tableData.forEach(item => {
          item.dirty = false;
        });
        this.$message.success('保存成功');
      }).catch(err => {
        this.$message.error('保存失败');
      });
    }
  }
}

在上面的示例代码中，我们使用 `addRow` 方法来动态添加一行，并将新添加的行设置为当前行，以便用户可以立即编辑它。然后，我们使用 `saveRows` 方法来保存新增的行。我们首先使用 `filter` 方法过滤出所有还没有提交到服务器的新增数据，然后调用 API 接口将数据保存到服务器上。保存成功后，我们更新表格数据，将所有已经提交到服务器上的数据从表格中移除，并将 `dirty` 字段设置为 `false`，以便用户知道哪些数据已经被保存过了。最后，我们使用 `$message` 组件来显示保存成功或失败的提示信息。