vue3 ant design 动态添加table行 增删操作

首先，你需要在 Vue3 项目中安装 Ant Design Vue 组件库，在你的组件中引入 `a-table` 组件，具体的代码如下：

<template>
  <div>
    <a-table :columns="columns" :data-source="dataSource">
      <template #action="{ record }">
        <a-button @click="deleteRow(record.key)" type="danger">删除</a-button>
      </template>
    </a-table>
    <a-button @click="addRow" type="primary" style="margin-top: 16px">添加行</a-button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Button, Table } from 'ant-design-vue';

export default {
  components: {
    'a-button': Button,
    'a-table': Table,
  },
  setup() {
    const dataSource = ref([
      {
        key: 1,
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: 2,
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      {
        key: 3,
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
    ]);

    const columns = ref([
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '操作',
        key: 'action',
        slots: { customRender: 'action' },
      },
    ]);

    const addRow = () => {
      dataSource.value.push({
        key: dataSource.value.length + 1,
        name: '',
        age: '',
        address: '',
      });
    };

    const deleteRow = (key) => {
      dataSource.value = dataSource.value.filter((item) => item.key !== key);
    };

    return {
      dataSource,
      columns,
      addRow,
      deleteRow,
    };
  },
};
</script>

在这段代码中，我们使用了 `ref` 函数来创建响应式数据 `dataSource` 和 `columns`，并且使用了 `a-table` 组件来展示表格数据。我们还添加了一个按钮 `添加行`，并且在 `setup` 函数中定义了 `addRow` 和 `deleteRow` 函数来处理增删操作。

在 `addRow` 函数中，我们使用 `push` 方法向 `dataSource` 中添加一条新的数据，其中 `key` 属性为当前数据长度加 1，其他属性为空字符串。

在 `deleteRow` 函数中，我们使用 `filter` 方法来过滤掉 `key` 属性等于传入参数 `key` 的数据项。

同时，我们还使用了 `slots` 来自定义 `action` 列的渲染方式，使得每一行的最后一列都显示一个删除按钮。