Vuetify v-simple-table嵌套v-for出现空白行如何解决

问题根源 #

1. 原先给<tbody>加v-for会生成多个<tbody>标签，浏览器渲染多个tbody时默认会产生间距，表现为行之间的空白
2. 每个pool对象里包含pool_id字符串属性，你在循环pool内所有属性时，会把pool_id也当成一行渲染，因为它没有company_name等字段，就会生成全是---的空白行

正确实现代码 #

<v-card>
    <v-card-text>                      
        <v-simple-table height="300">
            <template v-slot:default>
            <thead>
                <tr>
                <th class="text-left">
                    Company
                </th>
                <th class="text-left">
                    Job title
                </th>
                <th class="text-left">
                    Job location
                </th>
                </tr>
            </thead>
            <tbody>
                <!-- 用template承载外层循环，不会生成多余DOM节点 -->
                <template v-for="(pool, poolIndex) in allPools" :key="pool.pool_id || poolIndex">
                    <!-- 循环pool内属性，过滤掉非对象类型的pool_id字段 -->
                    <tr 
                        v-for="(poolInfo, poolKey, rowIndex) in pool" 
                        :key="`${pool.pool_id}-${poolKey}-${rowIndex}`"
                        v-if="typeof poolInfo === 'object' && poolInfo !== null"
                    >
                        <td>
                            {{ poolInfo.company_name ?? '---' }}
                        </td>
                        <td>
                            {{ poolInfo.job_title ?? '---' }}
                        </td>
                        <td>
                            {{ poolInfo.job_location ?? '---' }}
                        </td>
                    </tr>   
                </template>
            </tbody>
            </template>
        </v-simple-table>
    </v-card-text>
</v-card>

优化说明 #

• 仅保留一个<tbody>标签，避免多tbody产生的默认间距
• 用<template>承载外层的allPools循环，template是Vue虚拟占位标签，不会渲染为真实DOM，不会产生多余节点
• 循环pool内部属性时增加类型判断，只渲染值为对象的pool属性，自动跳过pool_id这类字符串属性，避免生成无效空白行
• 用空值合并运算符??替换重复的v-if/v-else判断，代码更简洁
• 优化key的生成规则，用pool_id+属性名的组合保证唯一性，比单纯用索引性能更优

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