Vue3表格组件render函数处理值无法渲染，出现循环结构转JSON错误

问题根源 #

你遇到的核心问题有两个：

1. VNode无法通过插值语法渲染：模板里的{{ column.render(item) }}是文本插值语法，它会尝试把传入值转为字符串，但column.render返回的是Vue的VNode对象，VNode内部存在循环引用（比如vnode与component的互相引用），执行JSON.stringify时就会触发循环结构报错。
2. v-if逻辑看似失效：本质是插值语法无法正确处理VNode，导致渲染异常，并非v-if判断本身有问题。

解决方案 #

根据你的需求场景，提供两种可行方案：

方案一：使用动态组件渲染VNode（适合复杂场景） #

修改表格组件的模板，将文本插值替换为<component>动态组件，直接渲染VNode：

<template>
    <table class="table__container">
        <thead>
            <tr>
                <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in data" :key="index">
                <td v-for="column in columns" :key="column.key">
                    <!-- 用动态组件渲染VNode -->
                    <component v-if="column.render" :is="column.render(item)" />
                    <span v-else>{{ item[column.key] }}</span>
                </td>
            </tr>
        </tbody>
    </table>
</template>

这种方式支持你在render函数里返回任意复杂的VNode（比如自定义组件、带事件的元素等）。

方案二：让render函数返回文本（适合简单格式化场景） #

如果你的render只是做文本格式化（比如duration转换），可以直接返回字符串，避免生成VNode：

const columns = [
    {
        title: 'song',
        key: 'name'
    },
    {
        title: 'singer',
        key: 'singer'
    },
    {
        title: 'album',
        key: 'album'
    },
    {
        title: 'duration',
        key: 'duration',
        render:(row) => {
            // 直接返回格式化后的字符串，而非VNode
            return formatDuration(row.duration);
        }
    }
]

此时模板里的{{ column.render(item) }}就能正常工作，不会触发循环引用报错。

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