Vue.js中删除条目后无需刷新页面更新DataTable的方法

一、针对当前场景的具体实现 #

方法1：手动过滤本地数据（推荐，无额外接口请求） #

因为unplugin-vue-router的loader返回的数据默认是只读响应式对象，我们需要在页面组件中将其转为可修改的本地状态，删除后直接过滤更新：

1. 修改页面组件，维护本地可修改的角色数据

<script setup lang="ts">
import { roleColumn } from '@/components/roles/column'
import { ref, watch } from 'vue'
const { data: roleData } = useRoleData()

// 将loader数据转为可修改的响应式数组
const roles = ref([...roleData.value])

// 监听loader数据变化，同步更新本地状态（适配首次加载或其他场景的数据更新）
watch(roleData, (newData) => {
  roles.value = [...newData]
}, { immediate: true })
</script>
<template>
   <DataTable :data="roles" :columns="roleColumn" />
</template>

2. 修改DataTableRowActions组件，添加删除事件通知

<script setup lang="ts">
// ... 保留原有导入
const emit = defineEmits<{
  delete: [roleId: string | number]
}>()

const handleDeleteRole = async () => {
  try {
    await deleteRole(role.value.id)
    showDeleteDialog.value = false
    // 通知父组件删除对应角色
    emit('delete', role.value.id)
  } catch (error: any) {
    console.error('删除失败:', error)
    // 可在此添加错误提示，如全局Toast
  }
}
</script>

3. 更新表格列配置，监听删除事件并过滤数据

// roleColumn.ts
export const roleColumn: ColumnDef<RoleDto>[] = [
  {
    accessorKey: 'name',
    header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Role Name' })
  },
  {
    id: 'actions',
    header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Action' }),
    cell: ({ row }) => h(DataTableRowActions, { 
      row,
      onDelete: (roleId) => {
        // 过滤掉已删除的角色，表格自动更新
        roles.value = roles.value.filter(r => r.id !== roleId)
      }
    }),
  },
]

方法2：重新触发loader加载数据（适合多端数据同步场景） #

如果需要确保数据与后端完全一致，可调用loader的invalidate方法重新获取数据：

1. 页面组件中获取loader的invalidate方法

<script setup lang="ts">
import { roleColumn } from '@/components/roles/column'
const { data: role, invalidate } = useRoleData()

// 定义刷新数据的方法
const refreshRoles = async () => {
  await invalidate()
}
</script>
<template>
   <DataTable :data="role" :columns="roleColumn" @delete="refreshRoles" />
</template>

2. DataTableRowActions组件中触发刷新事件

<script setup lang="ts">
// ... 保留原有代码
const handleDeleteRole = async () => {
  try {
    await deleteRole(role.value.id)
    showDeleteDialog.value = false
    emit('delete')
  } catch (error: any) {
    console.error('删除失败:', error)
  }
}
</script>

二、Vue中处理此类场景的常见实践 #

• 乐观更新：先修改本地数据，再调用后端接口；若接口失败，回滚本地数据并提示错误。优点是用户体验流畅，无需等待接口响应。
• 悲观更新：先调用后端接口，成功后再更新本地数据。适合数据一致性要求极高的场景，避免本地与后端数据不一致。
• 全局状态管理：使用Pinia/Vuex将共享数据存入全局状态，删除操作后直接更新全局状态，所有依赖该状态的组件自动同步更新。
• 数据加载器重触发：利用Vue Router或unplugin-vue-router的loader机制，通过invalidate方法重新拉取最新数据，适配路由层面的数据加载场景。
• 组件间通信：通过props/emit、provide/inject传递删除事件，让持有数据源的父组件负责更新数据，保持组件职责单一。

内容的提问来源于stack exchange，提问作者User_4373