使用v-slot：body时Vuetify v-data-table无响应

在Vuetify中，当你使用v-slot:body来自定义v-data-table的行内容时，默认的堆叠行为可能不会自动应用，因为你是直接控制了渲染逻辑。为了在移动设备上实现堆叠效果，你需要自己添加响应式逻辑来改变每行的布局。

这里有一个基本示例说明如何根据屏幕尺寸调整行的堆叠行为：

<template>
  <v-data-table :headers="headers" :items="items">
    <template v-slot:body="{ items }">
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td v-for="(header, index) in headers" :key="index">
            <!-- 根据屏幕宽度决定是否堆叠 -->
            <div :class="{ 'd-md-flex': $vuetify.breakpoint.mdAndUp, 'd-block': $vuetify.breakpoint.smAndDown }">
              {{ item[header.value] }}
            </div>
          </td>
        </tr>
      </tbody>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Dessert (100g serving)', value: 'name' },
        { text: 'Calories', value: 'calories' },
        // 其他表头...
      ],
      items: [ /* 数据项... */ ],
    };
  },
};
</script>

在这个示例中，我们利用了Vuetify的断点属性（$vuetify.breakpoint）来判断当前屏幕尺寸，并据此应用不同的CSS类（.d-md-flex 和 .d-block）。当屏幕尺寸为中等（md）及以上时，列将水平显示（不堆叠），而在小（sm）及以下尺寸时，列则会堆叠显示。这里的mdAndUp和smAndDown是Vuetify预定义的断点别名，分别对应不同的屏幕宽度范围。

请根据你的具体需求调整样式类和断点条件。