vue3后台管理系统用户表格实现删除功能

要在Vue3后台管理系统中实现用户表格的删除功能，需要以下步骤：

1. 在组件中引入要使用的API：

import { ref } from 'vue'; // 引入 ref
import { deleteUser } from '@/api/user'; // 引入删除用户的 API
import { message } from 'ant-design-vue'; // 引入消息提示组件

2. 使用 `ref` 定义表格数据和表格的 `loading` 属性：

export default {
  setup() {
    const dataSource = ref([]); // 表格数据
    const loading = ref(false); // 表格 loading 状态

    // ...

    return {
      dataSource,
      loading,
      // ...
    };
  }
};

3. 编写 `deleteUser` 方法用于删除用户：

export default {
  setup() {
    // ...

    const deleteUser = (id) => {
      return new Promise((resolve, reject) => {
        deleteUser(id)
          .then(() => {
            resolve();
          })
          .catch((err) => {
            reject(err);
          });
      });
    };

    // ...

    return {
      dataSource,
      loading,
      deleteUser,
      // ...
    };
  }
};

4. 在表格中添加删除按钮，并绑定 `deleteUser` 方法：

<template>
  <a-button type="link" @click="onRemove(record)">删除</a-button>
</template>

export default {
  setup() {
    // ...

    const onRemove = (record) => {
      const id = record.id;
      loading.value = true; // 开始加载数据

      deleteUser(id)
        .then(() => {
          // 删除成功后从表格中移除该行数据
          dataSource.value = dataSource.value.filter((item) => item.id !== id);
          message.success('删除成功');
        })
        .catch((err) => {
          message.error(`删除失败：${err.message}`);
        })
        .finally(() => {
          loading.value = false; // 加载结束
        });
    };

    // ...

    return {
      dataSource,
      loading,
      onRemove,
      // ...
    };
  }
};

至此，Vue3后台管理系统用户表格的删除功能就实现了。