Vue3 Script Setup组件中使用具名插槽报错，如何解决？

错误原因 #

1. 无效插槽定义：你在<td>内写的<template #test>是错误用法——#test是引用插槽的语法，但这里既没定义该插槽，也没传递对应内容，这种无效节点会导致Vue编译失败。
2. 表格结构逻辑错误：当前嵌套v-for会生成行数×表头数个<tr>，完全不符合表格一行对应一条数据的正常结构。
3. v-for缺少key：外层的<template v-for>未设置:key，违反Vue的v-for规范。

修复步骤 #

1. 删除无效的<template #test>代码块；
2. 调整表格结构：外层v-for遍历rows生成<tr>，内层在<tr>里遍历headers生成<td>，展示对应行的字段值；
3. 给外层的<template v-for>添加唯一key。

修复后的完整代码 #

<template>
    <table>
        <tbody>
            <template v-for="(row, i) in componentProps.rows" :key="i">
                <tr :data-alternating="i%2===0 ? 'even' : 'odd'">
                    <template v-for="(header, j) in componentProps.headers" :key="j">
                        <td class="font-weight-bold text-caption" v-if="j === 0">
                            {{ header.title }}
                        </td>
                        <td v-else>
                            {{ row[header.key] }} <!-- 假设headers包含key字段，用于匹配row的属性名 -->
                        </td>
                    </template>
                </tr>
            </template>
        </tbody>
    </table>
</template>

<script setup lang='ts'>
interface TableHeader {
    title: string;
    key: string; // 新增key字段，用于关联row的属性
}

const componentProps = defineProps<{
    headers: TableHeader[];
    rows: {[name:string]:any}[];
}>();
</script>

补充说明 #

如果你的表头与数据的映射逻辑不同，可根据实际需求修改row[header.key]部分，核心是保证每个<tr>对应一条数据，每个<td>对应该数据的一个字段。

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