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

Ant Design Vue提供了一个Table组件，可以实现带单元格编辑功能的表格。以下是一个实现新增、删除、编辑功能的示例代码：

<template>
  <div>
    <a-button type="primary" @click="handleAdd">新增</a-button>
    <a-table :columns="columns" :dataSource="data">
      <template v-for="col in columns" #[col.dataIndex]="{ text, record }">
        <template v-if="editingKey === record.key && col.editable">
          <a-input v-model:value="text" @pressEnter="handleSave(record.key)" />
        </template>
        <template v-else>
          {{ text }}
        </template>
      </template>
      <template #action="{ text, record }">
        <span>
          <a v-if="editingKey !== record.key" @click="handleEdit(record.key)">编辑</a>
          <a-divider type="vertical" />
          <a v-if="editingKey !== record.key" @click="handleDelete(record.key)">删除</a>
          <a-divider type="vertical" />
          <a v-if="editingKey === record.key" @click="handleSave(record.key)">保存</a>
          <a-divider type="vertical" />
          <a v-if="editingKey === record.key" @click="handleCancel">取消</a>
        </span>
      </template>
    </a-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: [
          { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
          { key: '2', name: 'Joe Black', age: 42, address: 'London No. 1 Lake Park' },
          { key: '3', name: 'Jim Green', age: 32, address: 'Sidney No. 1 Lake Park' },
          { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park' }
        ],
        columns: [
          { title: '姓名', dataIndex: 'name', editable: true },
          { title: '年龄', dataIndex: 'age', editable: true },
          { title: '住址', dataIndex: 'address', editable: true },
          {
            title: '操作',
            dataIndex: 'action',
            slots: { customRender: 'action' }
          }
        ],
        editingKey: ''
      }
    },
    methods: {
      handleAdd() {
        const newData = { key: Date.now().toString() }
        this.data = [...this.data, newData]
        this.editingKey = newData.key
      },
      handleDelete(key) {
        this.data = this.data.filter(item => item.key !== key)
      },
      handleEdit(key) {
        this.editingKey = key
      },
      handleSave(key) {
        const index = this.data.findIndex(item => item.key === key)
        const item = this.data[index]
        this.data.splice(index, 1, {
          ...item,
          ...this.$refs.table.getRecordByKey(key)
        })
        this.editingKey = ''
      },
      handleCancel() {
        this.editingKey = ''
      }
    }
  }
</script>

在这个示例中，Table组件使用了columns和dataSource属性来渲染表格。其中，每个列都可以设置editable属性来指定是否可编辑。当某个单元格被点击时，会根据editingKey和editable状态来判断是否需要显示编辑框。

新增功能通过在data数组中添加新数据实现。编辑功能通过将editingKey设置为当前行的key来激活编辑框。保存功能通过更新data数组中对应的数据来实现。删除功能则是通过过滤掉对应的数据实现。

以上代码仅供参考，具体实现方式可以根据实际需求进行调整。