Vuetify v-data-table 在使用 v-slot:body 时没有响应

Question

使用 v-slot:body 时，Vuetify v-data-table 不会在移动设备上堆叠

如果它实现了body v-slot，如何让数据表堆叠？正如在 Vuetify 文档中可以看到的，这是正常 v-data-table 的行为方式：

这就是它在使用 body 插槽时的行为方式：

谢谢你。

Answer 1

默认body 执行的v-data-table对表行两个组件-Row并MobileRow。当页面宽度小于 600px 时，MobileRow使用。

通过使用body插槽，默认实现以及移动逻辑将被丢弃，因此您必须提供自己的实现。幸运的是，我们可以使用一个方便的助手类来根据当前页面大小轻松切换样式。

这是一个带有解决方案草图的代码笔。相关部分：

  <template v-slot:body="props">
    <tbody>
      <tr v-for="item in props.items">
        <td class="d-block d-sm-table-cell" v-for="field in Object.keys(item)">
          {{item[field]}}
        </td>
      </tr>
    </tbody>
  </template>

对于更精确的样式，您可能希望使用可见性帮助器类并为表行提供两个单独的实现 - 就像默认实现一样。