如何隐藏数据表Vuetify中的行“无数据”

Question

我是vue和vuetify的初学者。我正在尝试在vue和vuetify上制作第一个应用程序。我想在vuetify中自定义数据表。它具有默认的“无数据”行（带有文本“无可用数据”）。我想隐藏此行，但数据表没有诸如“隐藏无数据”之类的选项。

Answer 1

您可以覆盖no-data插槽。在文档中的外观如下：

</v-data-table>    
 <template slot="no-data">
   <v-alert :value="true" color="error" icon="warning">
     Sorry, nothing to display here :(
   </v-alert>
 </template>
</v-data-table>

您所要做的就是将v-alert替换为空的div

<template slot="no-data">
  <div></div>
</template>

Answer 2

<template v-slot:no-data>
  <v-alert :value="true" color="error" icon="warning">
    Sorry, nothing to display here :(
  </v-alert>
</template>

Answer 3

有点晚了，但仍然可以帮助别人。

您可以使用空行并通过将可见性设置为“隐藏”来隐藏它：

<v-data-table ref="myTable">
    <template slot="no-data">
        <tr style="visibility: hidden;" />
    </template>
    ....
</v-data-table>

或者，如果您希望删除所有内容，可以通过代码手动将其删除：

$refs.myTable.$el.getElementsByTagName('tbody')[0].innerHTML = '';

myTable指的是v-data-table。

Answer 4

您可以通过CSS隐藏“无数据”行

<style scoped>
    ::v-deep .v-data-table__empty-wrapper {
        display: none;
    }
</style>

Answer 5

我想到的解决方案是直接进入vDataTable组件，并将消息路径更改为vuetify组件。 enter image description here