如何实现Vuetify v-data-table无数据提示消息垂直居中

实现方案 #

针对v-data-table组件的No data available无数据提示垂直居中需求，可根据表格的高度设置模式选择对应实现方式：

• 固定高度表格场景
  直接通过自定义类名覆盖组件默认样式即可，注意scoped样式下需要使用深度选择器穿透组件样式：

  1. 给表格组件添加自定义类名

  <v-data-table
    class="no-data-vertical-center"
    :headers="tableHeaders"
    :items="tableList"
    height="500"
  />
  

  2. 写入对应覆盖样式，注意根据自己项目的表头实际高度调整calc计算值：

  /* Vuetify 2 版本适配 */
  .no-data-vertical-center .v-data-table__wrapper tr.v-data-table__empty-wrapper {
    height: calc(100% - 48px); /* 默认表头高度为48px，自定义过表头高度请同步修改 */
  }
  .no-data-vertical-center .v-data-table__empty-wrapper td {
    vertical-align: middle;
    text-align: center;
  }
  
  /* Vuetify 3 版本适配 */
  .no-data-vertical-center .v-table__wrapper tr.v-data-table__empty-row {
    height: calc(100% - 56px); /* Vuetify3默认表头高度为56px，自定义过表头高度请同步修改 */
  }
  .no-data-vertical-center .v-data-table__empty-row td {
    vertical-align: middle;
    text-align: center;
  }
  

• 动态自适应高度表格场景
  这类表格高度随父容器变化，不要写死高度值，用flex布局让无数据行自动撑满剩余空间即可：

  1. 保证表格外层父容器有明确高度，设置为纵向flex布局
  2. 给表格添加flex自适应属性，配合自定义样式实现居中：

  <!-- 父容器示例 -->
  <div style="height: calc(100vh - 120px); display: flex; flex-direction: column;">
    <v-data-table
      class="flex-grow-1 no-data-vertical-center"
      :headers="tableHeaders"
      :items="tableList"
      hide-default-footer
    />
  </div>
  

  对应适配样式：

  .no-data-vertical-center .v-table__wrapper {
    flex: 1;
  }
  .no-data-vertical-center tbody {
    height: 100%;
  }
  .no-data-vertical-center .v-data-table__empty-row {
    height: 100%;
  }
  .no-data-vertical-center .v-data-table__empty-row td {
    vertical-align: middle;
    text-align: center;
  }
  

如果需要自定义无数据提示的内容，直接使用组件提供的empty插槽即可，无需修改默认配置：

<v-data-table ...>
  <template #empty>
    <div class="text-grey">暂无匹配数据</div>
  </template>
</v-data-table>

提示：如果调整后出现表格滚动条异常、高度错位的问题，优先检查表头、表尾（分页栏）的实际高度，同步修改样式里的高度计算值即可。

内容的提问来源于stack exchange，提问作者PyKKe