Пользовательские разделители таблиц данных 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);
   }
}

Измените медиа-запросы и стили на любые нужные вам значения.