vuetify 数据表移动视图

Question

我需要一个解决方案来设置移动 vue 中 vuetify 数据表的样式，以便在行之间添加一些边距 如下图所示

这就是 vuetify 默认的样子

这是 vuetify 示例的 codepen 链接

 <div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
    ></v-data-table>
  </v-app>
</div>

https://codepen.io/ThugMa/pen/BaWpBbj?editors=1010

Answer 1

不确定这是否是这样做的方式，但扭曲 css 可以做你想要的。

https://codepen.io/michael-vascue/pen/KKWaKZo

.v-data-table>.v-data-table__wrapper .v-data-table__mobile-table-row {
  margin: 10px; // add margin between each row
  border: 1px solid #ededed; // add border color
  display: block; // display table row as block
}