如何在v-data-table中处理Promise数组

你遇到的核心问题是：props.data.map(async (item) => { ... })会返回一个Promise数组，而v-data-table无法直接识别Promise类型的数据，所以无法正常渲染。解决思路是等待所有异步操作完成后，再把最终的结果数组赋值给cleanData。

修改方案 #

把loadCloudStorageData改成异步函数，用Promise.all等待所有缩略图请求完成后再更新cleanData，具体代码如下：

// load cloud storage data
const cleanData = ref<any[]>([])
const isLoading = ref(false) // 可选：添加加载状态提升体验

const loadThumbnails = async (dmcp_tab_id: number, dmcp_box_id: string) => {
  let attempts = 1
  let result: CloudStorage | null = null
  do {
    attempts += 1
    result = await documentStore.getCloudStorage(dmcp_tab_id, dmcp_box_id)
  } while (result?.thumbnail === "" && attempts <= 5)

  return result?.thumbnail
}

const loadCloudStorageData = async () => {
  isLoading.value = true
  try {
    // 先同步处理日期格式化，分离同步与异步逻辑
    const baseProcessedItems = props.data.map(item => ({
      ...item,
      when_uploaded: dayjs(item.when_uploaded).format('MM/DD/YYYY')
    }))

    // 用Promise.all等待所有缩略图请求完成，得到最终处理后的数组
    const finalItems = await Promise.all(
      baseProcessedItems.map(async (item) => ({
        ...item,
        thumbnail: await loadThumbnails(item.dmcp_tab_id, item.dmcp_box_id)
      }))
    )

    cleanData.value = finalItems
  } catch (err) {
    console.error('加载数据失败:', err)
    // 可选：添加错误提示逻辑
  } finally {
    isLoading.value = false
  }
}

// 初始加载数据，用void忽略Promise避免控制台警告
void loadCloudStorageData()

// 监听props.data变化，异步处理数据更新
watch(props.data, async () => {
  await loadCloudStorageData()
}, { immediate: false })

关键修改说明 #

• 用Promise.all处理异步数组：Promise.all会等待数组中所有Promise都resolve后，返回一个包含所有结果的数组，这样cleanData最终拿到的是真实数据而非Promise。
• 分离同步与异步逻辑：先同步处理日期格式化，再异步获取缩略图，让代码逻辑更清晰。
• 移除不必要的ref：loadThumbnails里的result不需要用ref包裹，普通变量即可完成逻辑，减少响应式开销。
• 添加加载状态：可选的isLoading可以让表格在数据加载过程中显示加载动画，提升用户体验。

模板中配合加载状态使用 #

<v-data-table
  :items="cleanData"
  :loading="isLoading"
  <!-- 你的表格列配置等其他属性 -->
></v-data-table>

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