如何在数据表 Vuetify 中隐藏行“无数据”答案

【问题标题】：How I can hide row 'no-data' in datatable Vuetify如何在数据表 Vuetify 中隐藏行“无数据”
【发布时间】：2019-02-23 08:56:25
【问题描述】：

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

【问题讨论】：

标签： vuetify.js

【解决方案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>

【讨论】：

谢谢，但问题不同。即使我在槽no-data中放了一个空的div，表格标题下的行仍然存在，我无法删除它。
:hide-headers="nodata"。没有数据时将nodata改为false。

【解决方案2】：

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：