使用v-slot:body时，验证v-data-table不响应

Question

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

如果数据表实现了主体v槽，我如何才能将其堆叠起来？在Vuetify文档中可以看到，这是一个正常的v-data-table的行为方式：

​

​

这是使用body slot时它的行为方式：

​

​

谢谢。

Answer 1

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

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

这是一个包含解决方案草图的codepen。相关部分：

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

为了获得更精确的样式，您可能希望使用可见性助手classes，并为表行提供两个单独的实现-就像默认实现一样。