Vuetify的data-table无法传入Map对象作为items的解决方法

Vuetify 的 v-data-table 组件对 items 属性做了强类型校验，仅接受数组类型的行数据源，直接传入 Map 实例会触发校验失败，抛出你看到的 Invalid prop : type check failed for prop "items". Expected Array, got Map 错误。

核心思路是把 Map 结构的数据源转换成组件要求的数组格式再传入，推荐用计算属性做转换，保证数据变更时表格能自动响应更新。

• 基础转换写法（保留Map的id键到行数据中）
  你的Map以id为键、值为行数据对象，转换时可以直接把id合并进行对象，避免后续做行选择、编辑操作时缺少唯一标识：

  <template>
    <v-data-table :items="tableItems" :headers="tableHeaders" />
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  // 原有Map数据源定义
  const dataset = ref(new Map())
  const tableHeaders = ref([
    // 自行替换为实际表头配置
  ])
  
  // 计算属性实时转换为表格要求的数组格式
  const tableItems = computed(() => {
    return Array.from(dataset.value.entries()).map(([rowId, rowContent]) => {
      return {
        id: rowId,
        ...rowContent
      }
    })
  })
  </script>
  

• 简化写法（不需要用到Map的id键时）
  如果你的行数据对象本身已经包含唯一标识字段，不需要额外取Map的键，直接取Map的所有值转数组即可：

  const tableItems = computed(() => Array.from(dataset.value.values()))
  

• 如果是Vue2环境，直接调用Map的set/delete等内置方法修改数据时，Vue无法自动检测到变更，表格不会自动更新。可以在修改数据后手动调用this.$forceUpdate()触发刷新，或者每次修改后重新给dataset赋值为新的Map实例。
• 如果是Vue3环境，只要dataset是用ref/reactive声明的响应式对象，直接调用Map的增删改方法会自动触发计算属性更新，不需要额外处理。

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