如何在datatable Vuetify中隐藏行'no-data‘

Question

我是vue和vuetify的初学者。我正在试着在vue和vuetify上做第一个申请。我想在vuetify中自定义数据表。它有行'no- data‘默认值(文本为'No data available')。我想隐藏这一行，但是数据表没有' hide - no - data‘这样的选项。

Answer 1

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

很抱歉，这里没有显示的内容:(

您所要做的就是用一个空的div替换v-alert

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

Answer 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>

Answer 3

有点晚了，但还是能帮助到一些人..

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

<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。