自定义Vuetify数据表格分隔线

Question

在移动设备上显示时，每行项目之间的分隔线不是很清晰。我该如何自定义这个分隔线的宽度和颜色呢？

我的需求： 在移动设备上自定义分隔线

以下是来自vuetify文档的代码样例：

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

- Marcos De la Cruz

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

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

- AlekseyHoffman