vuetify.js - 自定义 vuetify 数据表分隔符

Question

当 v-data-table 在移动 View 上时，项目之间的分隔线不清晰。 如何自定义此分隔线，例如线宽和颜色？

我想做的: Custom divider on mobile view

来自 vuetify doc 的代码示例

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

Answer 1

您可以简单地用您自己的样式覆盖 Vuetify CSS。

更改边框宽度 border-bottom: thin至 border-bottom: medium :

演示

https://codepen.io/aQW5z9fe/pen/QWjVYpL?editors=0100

在编辑器中选择“垂直布局”，然后将区域大小调整为<700px宽度(或窗口本身)以查看样式更改:

样式

@media screen and (max-width: 700px) {
   .theme--light.v-data-table thead tr:last-child th, 
   .theme--light.v-data-table tbody tr:not(:last-child) td:last-child,
   .theme--light.v-data-table tbody tr td,
   .theme--light.v-data-table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {
      border-bottom: medium solid rgba(0,0,0,.12);
   }
}

将媒体查询和样式更改为您需要的任何值。