vue.js - vuetify v-simple-table 中的嵌套 v-for - 如何摆脱空格？

Question

我想在一个简单的 vuetify 表（v-simple-table）中显示以下数据（对象）。此数据存储在变量 allPools 中

[ 
{ 
    "pool_2": { 
        "company_name": "Testcompany1" 
        "job_title": "Testtitle1", 
        "job_location": "Testcity1", 
        
    }, 
     
    "pool_3": { 
        "company_name": "Testcompany1", 
        "job_title": "Testtitle2" 
        "job_location": Testcity2, 
        
    }, 
    "pool_id": "asdf12345" 
}, 

{ 
    "pool_0": { 
        "company_name": "Testcompany2", 
        "job_title": "Testtitle3", 
        "job_location": Testcity3, 
        
    }, 
        
    "pool_3": { 
        "company_name": "Testcompany2", 
        "job_title": "Testtitle4", 
        "job_location": Testcity4,  
    }, 
    "pool_id": "dfghj45645" 
} 

]

我使用以下代码来显示数据（带有 vuetify 的 vuejs）：

<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 v-for="(pool, index) in allPools" :key="index">
                <tr v-for="(p, index) in pool" :key="index">
                    <!-- COMPANY NAME - START -->
                    <td v-if="p.company_name">
                        {{ p.company_name }}
                    </td>
                    <td v-else>
                        ---
                    </td>
                    <!-- COMPANY NAME - START -->

                    <!-- JOB TITLE - START -->
                    <td v-if="p.job_title">
                        {{ p.job_title }}
                    </td>
                    <td v-else>
                        ---
                    </td>
                    <!-- JOB TITLE - START -->

                    <!-- LOCATION - START -->
                    <td v-if="p.job_location">
                        {{ p.job_location }}
                    </td>
                    <td v-else>
                        ---
                    </td>
                    <!-- LOCATION - END -->
                </tr>   
            </tbody>
            </template>
        </v-simple-table>
    </v-card-text>
</v-card>

我得到以下结果：

问题是，我总是在数据之间有空行。我知道这是因为我在选项卡中有 v-for 循环，但我找不到任何其他解决方案。有人知道我如何迭代嵌套的 v-for 循环并将其正确显示在 v-simple 表中吗？

谢谢

• 克里斯

Answer 1

第一个循环不应该在tbody元素中，尝试将其添加到虚拟元素中template：

 <tbody  >
   <template  v-for="(pool, index) in allPools">
                <tr v-for="(p, index) in pool" :key="index">
                 .....
                </tr>   
   </template>
</tbody>