vuetify 中的嵌套 v-for v-simple-table - 如何摆脱空白？

Question

我想在一个简单的 vuetify table (v-simple-table) 中显示以下数据 (Object)。此数据存储在变量 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" 
}

]

我使用下面的代码来显示数据（vuejs 和 vuetify）：

<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 table 中正确显示它？？

谢谢

克里斯

Answer 1

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

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

vuetify 中的嵌套 v-for v-simple-table - 如何摆脱空白？

Nested v-for in vuetify v-simple-table - How to get rid of empty spaces?

vue.js

v-for

vuetify.js