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

Question

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

我想做的： 移动视图上的自定义分隔线

来自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);
   }
}

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