自定义数据表分隔符

Question

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

我想做什么：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);
   }
}

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