Question

我正在使用Vuetify网站上示例中的代码，但是我的无数据和无结果广告位内容从没有出现。

我像这样覆盖标准的肢体...

<template v-slot:body="{ items }">
    <transition-group tag="tbody" name="invoice" v-for="(item, index) in items" :key="index">
        . . .
    </transition-group>
</template>

我的无数据/结果位看起来像这样。

<template v-slot:no-data>
  <h3 class="ma-6 subtitle-1 text-center">NO DATA HERE!</h3>
</template>

<template v-slot:no-results>
  <h3 class="ma-6 subtitle-1 text-center">NO RESULTS HERE!</h3>
</template>

进度栏可以正常工作。

<template v-slot:progress>
  <v-progress-linear color="yellow" :height="10" indeterminate></v-progress-linear>
  <br />
  <h3 class="ma-6 subtitle-1 text-center">Loading invoices... please wait...</h3>
</template>

我遵循Vuetify文档，但是没有数据和没有结果的模板从不显示。我如何让他们工作？

Answer 1

      <v-data-table :headers="headers" :items="desserts" :search="search" item-key="name" style="height: 700px">
        <template v-slot:body="{items, headers}">
          <tbody name="list" is="transition-group" v-if="items.length > 0">
            <tr v-for="item in items" :key="item.name" class="item-row">
              <td>{{item.name}}</td>
              <td>{{item.calories}}</td>
              <td>{{item.fat}}</td>
              <td>{{item.carbs}}</td>
              <td>{{item.protein}}</td>
              <td>{{item.iron}}</td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td :colspan="headers.length" style="text-align: center">No Results Here!</td>
            </tr>
          </tbody>
        </template>
      </v-data-table>

我遇到了同样的问题，我解决了在tbody元素上添加检查items.length的条件。如果没有结果，请转到v-else。

您将需要稍微更改数据表结构。

https://codepen.io/Jayesh_v/pen/WNQmaPJ

Answer 2

我找到了v-slot:[``no-data``]而不是v-slot:no-data的作品。大概不是以相同的方式解析它。

在Vuetify数据表中使用主体插槽时，无数据和无结果不再起作用

2 个答案: