Vue2.0的ant design vue带单元格编辑功能的表格 新增删除编辑

Ant Design Vue提供了一个 `a-table` 组件，可以非常方便地实现带有单元格编辑、新增和删除功能的表格。以下是一个简单的示例：

<template>
  <div>
    <a-table :columns="columns" :data-source="dataSource" @change="handleTableChange">
      <template #name="text" #record="record" #index="index">
        <a-input :value="record.name" @input="handleInputChange(index, 'name', $event.target.value)" />
      </template>
      <template #age="text" #record="record" #index="index">
        <a-input-number :value="record.age" @change="handleInputChange(index, 'age', $event)" />
      </template>
      <template #action="text" #record="record" #index="index">
        <a-popconfirm title="确定要删除吗？" @confirm="handleDelete(index)">
          <a-button type="danger" icon="delete" />
        </a-popconfirm>
      </template>
      <template #footer>
        <a-button type="primary" @click="handleAdd">新增</a-button>
      </template>
    </a-table>
  </div>
</template>

<script>
import { ATable, AInput, AInputNumber, AButton, APopconfirm } from 'a-ui-components';

export default {
  name: 'EditableTable',
  components: {
    ATable,
    AInput,
    AInputNumber,
    AButton,
    APopconfirm,
  },
  data() {
    return {
      columns: [
        { title: '姓名', dataIndex: 'name', key: 'name' },
        { title: '年龄', dataIndex: 'age', key: 'age' },
        { title: '操作', dataIndex: 'action', key: 'action' },
      ],
      dataSource: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
      ],
      nextId: 3,
    };
  },
  methods: {
    handleInputChange(index, field, value) {
      // 更新数据源中的记录
      this.dataSource[index][field] = value;
    },
    handleAdd() {
      // 新增一条记录
      this.dataSource.push({ id: this.nextId, name: '', age: '' });
      this.nextId++;
    },
    handleDelete(index) {
      // 删除一条记录
      this.dataSource.splice(index, 1);
    },
    handleTableChange(data) {
      // 处理表格数据变化
      this.dataSource = data;
    },
  },
};
</script>

在这个示例中，我们定义了一个带有三列的表格：姓名、年龄和操作。姓名和年龄两列都可以进行单元格编辑，当用户修改单元格内容时，会触发 `handleInputChange` 方法，该方法会更新数据源中的记录。操作列中包含一个删除按钮，当用户点击该按钮时，会触发 `handleDelete` 方法，该方法会删除对应的记录。表格的底部还有一个新增按钮，当用户点击该按钮时，会新增一条空记录。

需要注意的是，我们没有为每条记录都添加一个唯一的 `id` 属性，而是直接在数据源中操作记录。同时，我们定义了一个 `@change` 事件，当表格中的数据发生变化时，会触发该事件，我们可以通过该事件来更新数据源中的数据。

希望这个示例能够帮助您实现带单元格编辑、新增和删除功能的表格。如果您有任何问题，请随时与我联系。