如何将v-data-table页脚的图例移至左侧？

你当前使用footer.page-text插槽导致图例出现在分页按钮区域，可通过以下两种方式将图例移至页脚左侧：

方法一：自定义整个页脚布局 #

通过footer插槽完全控制页脚结构，将图例放在左侧，分页控件放在右侧：

<v-data-table :items="reports">
  <template v-slot:item="{item}">
    ... 你的现有列内容代码 ...
  </template>
  <template v-slot:footer="{ props }">
    <v-card-text class="d-flex justify-between align-center pa-3">
      <!-- 左侧图例 -->
      <div class="d-flex align-center">
        <v-icon color="secondary" size="15px" class="mr-1">circle</v-icon>
        <span class="mr-3">即将到期（Upcoming）</span>
        <v-icon color="amber" size="15px" class="mr-1">circle</v-icon>
        <span class="mr-3">今日到期（Due Today）</span>
        <v-icon color="red" size="15px" class="mr-1">circle</v-icon>
        <span>逾期（Overdue）</span>
      </div>
      <!-- 右侧原生分页控件 -->
      <v-pagination
        v-model="props.page"
        :length="props.pageCount"
        hide-details
      ></v-pagination>
    </v-card-text>
  </template>
</v-data-table>

方法二：调整现有插槽样式 #

在原有footer.page-text插槽的外层容器添加Vuetify内置flex类，让图例占据左侧空间：

<v-data-table :items="reports">
  <template v-slot:item="{item}">
    ... 你的现有列内容代码 ...
  </template>
  <template v-slot:footer.page-text>
    <div class="d-flex justify-start flex-grow-1 align-center">
      <v-icon color="secondary" size="15px" class="mr-1">circle</v-icon>
      <span class="mr-3">即将到期（Upcoming）</span>
      <v-icon color="amber" size="15px" class="mr-1">circle</v-icon>
      <span class="mr-3">今日到期（Due Today）</span>
      <v-icon color="red" size="15px" class="mr-1">circle</v-icon>
      <span>逾期（Overdue）</span>
    </div>
  </template>
</v-data-table>

说明 #

• flex-grow-1让图例容器占据页脚左侧剩余空间，避免被分页控件挤压到右侧
• justify-start确保图例内容左对齐
• align-center让图标和文字垂直居中，替代原有的margin-bottom样式

内容的提问来源于stack exchange，提问作者courtneymickelsen