vue2项目结合ant-design-vue组件库实现表格的可编辑行功能，表格中的数据都是后端接口获取的，点击编辑按钮，编辑按纽消失变保存和取消，点击保存按钮，保存修改之后的数据，点击取消，恢复到修改之前的数据

要实现表格的可编辑行功能，可以使用 `Table` 组件提供的 `editable` 属性和 `customRow` 插槽。具体实现步骤如下：

1. 在 `Table` 组件上添加 `editable` 属性，将其设置为 `true`，开启可编辑行功能。

<template>
  <a-table :columns="columns" :data-source="data" row-key="id" :editable="true">
    <!-- ... -->
  </a-table>
</template>

2. 在 `columns` 中为需要编辑的列添加 `customRender` 属性，并将其设置为一个函数。在该函数中，返回一个包含可编辑行和非可编辑行的 `template`，并根据 `record.editable` 属性的值来判断显示哪个 `template`。

data() {
  return {
    columns: [
      {
        title: '姓名',
        dataIndex: 'name',
        editable: true, // 需要编辑的列
        customRender: (text, record) => {
          if (record.editable) { // 可编辑状态
            return (
              <a-input v-model={record.name} />
            );
          } else { // 非可编辑状态
            return text;
          }
        },
      },
      // ...
    ],
    // ...
  }
},

3. 在 `customRow` 插槽中为每一行添加编辑按钮，并通过 `record.editable` 属性的值来判断当前行是否可编辑。同时，在点击编辑按钮时将 `record.editable` 属性设置为 `true`，并将编辑按钮替换为保存和取消按钮。在点击保存或取消按钮时，将 `record.editable` 属性重新设置为 `false`，并根据需要保存或恢复数据。

<template>
  <a-table :columns="columns" :data-source="data" row-key="id" :editable="true">
    <template #customRow="record, index">
      <tr>
        <!-- 其他列 -->
        <td>
          <a-icon
            type="edit"
            v-if="!record.editable"
            @click="editRow(record)"
          />
          <a-button-group v-else>
            <a-button type="primary" @click="saveRow(record)">保存</a-button>
            <a-button @click="cancelEdit(record)">取消</a-button>
          </a-button-group>
        </td>
      </tr>
    </template>
  </a-table>
</template>

完整代码如下：

<template>
  <a-table :columns="columns" :data-source="data" row-key="id" :editable="true">
    <template #customRow="record, index">
      <tr>
        <td>{record.name}</td>
        <td>{record.age}</td>
        <td>{record.address}</td>
        <td>
          <a-icon
            type="edit"
            v-if="!record.editable"
            @click="editRow(record)"
          />
          <a-button-group v-else>
            <a-button type="primary" @click="saveRow(record)">保存</a-button>
            <a-button @click="cancelEdit(record)">取消</a-button>
          </a-button-group>
        </td>
      </tr>
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          name: '张三',
          age: 18,
          address: '北京市朝阳区',
          editable: false,
        },
        {
          id: 2,
          name: '李四',
          age: 20,
          address: '上海市浦东新区',
          editable: false,
        },
      ],
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          editable: true,
          customRender: (text, record) => {
            if (record.editable) {
              return (
                <a-input v-model={record.name} />
              );
            } else {
              return text;
            }
          },
        },
        {
          title: '年龄',
          dataIndex: 'age',
          editable: true,
          customRender: (text, record) => {
            if (record.editable) {
              return (
                <a-input-number v-model={record.age} />
              );
            } else {
              return text;
            }
          },
        },
        {
          title: '地址',
          dataIndex: 'address',
          editable: true,
          customRender: (text, record) => {
            if (record.editable) {
              return (
                <a-input v-model={record.address} />
              );
            } else {
              return text;
            }
          },
        },
        {
          title: '操作',
          dataIndex: 'operation',
        },
      ],
    };
  },
  methods: {
    editRow(record) {
      record.editable = true;
    },
    saveRow(record) {
      record.editable = false;
      // TODO: 保存修改之后的数据
    },
    cancelEdit(record) {
      record.editable = false;
      // TODO: 恢复到修改之前的数据
    },
  },
};
</script>

在保存或恢复数据的方法中，可以调用后端接口来实现数据的持久化保存。