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

Ant Design Vue提供了一个Table组件，可以用于展示数据，同时也支持单元格的编辑、新增和删除功能。以下是一个简单示例：

<template>
  <div>
    <a-button type="primary" @click="addRow">新增行</a-button>
    <a-table :columns="columns" :data-source="data" row-key="id" @row-save="saveRow" @row-delete="deleteRow">
      <template slot="name" slot-scope="{ record, index }">
        <a-input v-model="record.name" @change="updateRow(index)" />
      </template>
      <template slot="age" slot-scope="{ record, index }">
        <a-input v-model.number="record.age" @change="updateRow(index)" />
      </template>
      <template slot="action" slot-scope="{ record }">
        <a @click="deleteRow(record)">删除</a>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '操作',
          key: 'action',
        },
      ],
      data: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
      ],
    };
  },
  methods: {
    addRow() {
      const id = this.data.length + 1;
      this.data.push({ id, name: '', age: 0 });
    },
    saveRow(row) {
      console.log('保存行', row);
    },
    deleteRow(row) {
      const index = this.data.findIndex(item => item.id === row.id);
      if (index >= 0) {
        this.data.splice(index, 1);
      }
    },
    updateRow(index) {
      this.$emit('row-change', this.data[index]);
    },
  },
};
</script>

在上面的示例中，我们使用了`a-table`组件来展示数据，并使用了`slot`来自定义单元格的渲染方式。其中，`name`和`age`列支持编辑，当单元格的值发生变化时，会触发`updateRow`方法，该方法会通过`$emit`方法向父组件发送`row-change`事件，父组件可以在接收到该事件时保存修改后的数据。新增和删除功能则分别对应`addRow`和`deleteRow`方法，当用户点击保存按钮时，会触发`row-save`事件，父组件可以在接收到该事件时保存新增的数据。