Nuxt3渲染TanStack Table报错：$data.somes.getRowModel不是函数

问题原因 #

1. 数据类型混淆：你把API返回的原始数据数组直接赋值给somes，但getRowModel()是TanStack Table实例的方法，普通数组并不具备这个方法。
2. Table实例初始化错误：useVueTable未传入必要的配置项（列定义、数据源），且初始化逻辑不符合流程。
3. 初始值类型错误：somes初始设为空字符串，导致组件渲染时提前调用方法触发类型错误。

修正后的代码 #

<template>
  <div>
    <table>
      <tbody>
        <tr v-for="row in table?.getRowModel().rows" :key="row.id">
          <td v-for="cell in row.getVisibleCells()" :key="cell.id">
            <FlexRender
              :render="cell.column.columnDef.cell"
              :props="cell.getContext()"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { useVueTable } from '@tanstack/vue-table';
import { FlexRender } from '@tanstack/vue-table';

export default {
  components: { FlexRender },
  data () {
    return {
      table: null,
      somes: [], // 初始化为空数组避免类型错误
      // 按实际数据结构定义表格列配置
      columns: [
        {
          accessorKey: 'id',
          header: 'ID',
        },
        // 添加其他列配置...
      ]
    }
  },
  async mounted() {
    this.somes = await $fetch('https://xxxxx.xx/somes');
    // 基于获取到的数据初始化Table实例
    this.table = useVueTable({
      data: this.somes,
      columns: this.columns,
    });
  },
}
</script>

关键修改点 #

• 初始值修正：将somes初始化为空数组，避免组件首次渲染时的类型不匹配报错。
• Table实例初始化：在API数据获取完成后，传入data和columns配置调用useVueTable，生成合法的Table实例并赋值给table变量。
• 模板调用修正：模板中使用table.getRowModel().rows调用Table实例方法，而非直接操作原始数据数组。

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