vuetify 数据 table 移动视图

Question

我需要一个在移动 vue 中设置 vuetify 数据样式的解决方案 table 以在行之间添加一些边距看起来像下图

这就是 vuetify 默认情况下的样子

这是 vuetify 示例的代码笔 link

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

vuetify 数据 table 移动视图

vuetify data table mobile view

css

vue.js

vuetify.js