Vue3中使用@tanstack/vue-table实现单元格渲染组件的问题

直接在columnHelper的cell配置里写类似React的JSX写法在Vue3里不生效，得按Vue的渲染逻辑调整，结合FlexRender的正确用法解决，具体操作如下：

1. 用Vue的h函数生成组件虚拟节点 #

Vue3中需要通过h函数（渲染函数）创建组件的虚拟节点，不能直接返回JSX（除非已配置Vue的JSX支持）。列配置示例：

<script setup>
import { h } from 'vue'
import { createVueTable, columnHelper } from '@tanstack/vue-table'
import MyVue3Component from './MyVue3Component.vue'

// 模拟表格数据
const tableData = [
  { data: '示例内容1' },
  { data: '示例内容2' }
]

// 配置列
const columns = [
  columnHelper.accessor(row => row.data, {
    id: 'any-id',
    cell: (props) => h(MyVue3Component, {
      // 给自定义组件传递所需props
      content: props.row.original.data
    })
  })
]

// 创建表格实例
const table = createVueTable({
  columns,
  data: tableData
})
</script>

2. 模板中正确调用FlexRender #

渲染单元格时，要把cell的渲染函数和上下文正确传递给FlexRender，通过Vue的<component>标签动态渲染：

<template>
  <div class="table-wrap">
    <table>
      <thead>
        <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
          <th v-for="header in headerGroup.headers" :key="header.id">
            {{ header.isPlaceholder ? '' : header.renderHeader() }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in table.getRowModel().rows" :key="row.id">
          <td v-for="cell in row.getVisibleCells()" :key="cell.id">
            <component :is="FlexRender(cell.column.columnDef.cell, cell.getContext())" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { FlexRender } from '@tanstack/vue-table'
// 其他导入和table实例创建同上
</script>

3. 可选：配置JSX支持（偏好JSX写法时） #

如果你习惯用类似React的JSX写法，需要先给Vue项目配置JSX支持：

• Vite项目：安装@vitejs/plugin-vue-jsx，并在vite.config.js中注册插件
• Vue CLI项目：安装@vue/babel-plugin-jsx，并在babel配置中启用插件

配置完成后，列的cell可以直接写JSX：

cell: (props) => <MyVue3Component content={props.row.original.data} />

常见失效原因排查 #

• 未用h函数生成虚拟节点，直接写JSX但未配置Vue的JSX支持
• FlexRender的第二个参数传递错误，必须是cell.getContext()而非自定义props
• 自定义组件未正确导入，或传递的props与组件定义不匹配

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