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

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

<template>
  <div>
    <a-table :columns="columns" :data-source="dataSource">
      <template #name="text" #record="record" #index="index">
        <a-input v-model:value="record.name" @change="handleInputChange(record, 'name')" />
      </template>
      <template #age="text" #record="record" #index="index">
        <a-input-number v-model:value="record.age" @change="handleInputChange(record, 'age')" />
      </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(record, field) {
      // 更新数据源中的记录
      const index = this.dataSource.findIndex(item => item.id === record.id);
      this.dataSource[index][field] = record[field];
    },
    handleAdd() {
      // 新增一条记录
      this.dataSource.push({ id: this.nextId, name: '', age: '' });
      this.nextId++;
    },
    handleDelete(index) {
      // 删除一条记录
      this.dataSource.splice(index, 1);
    },
  },
};
</script>

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

需要注意的是，我们在数据源中为每条记录都添加了一个唯一的 `id` 属性，这样在更新或删除记录时，我们可以根据 `id` 属性来查找对应的记录。同时，我们还定义了一个 `nextId` 属性，表示下一条记录的 `id` 值，每次新增记录时，都会将 `nextId` 的值加一，以确保每条记录的 `id` 值都是唯一的。

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