自定义 vuetify 数据表分隔符答案

【问题标题】：Custom vuetify data table dividers自定义 vuetify 数据表分隔符
【发布时间】：2020-05-15 00:38:58
【问题描述】：

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

来自vuetify doc的代码示例

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

【问题讨论】：

标签： vuetify.js customization divider v-data-table

【解决方案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);
   }
}

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

【讨论】：