Vuetify：如何修改v-data-table组件中每页显示条数的下拉选项？

Got it! Changing the page size options in Vuetify's v-data-table footer is super straightforward using the built-in items-per-page-options prop. Here's how you can do it:

Basic Approach: Use the items-per-page-options Prop #

This prop lets you override the default page size dropdown values (which are [10, 20, 30, 40, 50] by default). You can pass either an array of numbers or an array of objects for custom labels.

Example 1: Numeric Only Options #

If you just want to adjust the available page sizes, pass an array of integers:

<template>
  <v-data-table
    :items="yourDataset"
    :headers="tableHeaders"
    :items-per-page-options="[5, 10, 25, 50, 100]" <!-- Your custom sizes -->
    items-per-page="10" <!-- Default selected size -->
  ></v-data-table>
</template>

Example 2: Custom Label Options #

For more user-friendly labels (like "Show 5 Items" instead of just "5"), use an array of objects with text (display label) and value (page size number) properties:

<template>
  <v-data-table
    :items="yourDataset"
    :headers="tableHeaders"
    :items-per-page-options="[
      { text: 'Show 5', value: 5 },
      { text: 'Show 10', value: 10 },
      { text: 'Show 25', value: 25 },
      { text: 'Show All', value: yourDataset.length }
    ]"
    items-per-page="10"
  ></v-data-table>
</template>

Dynamic Options (Optional) #

If you need to adjust the options on the fly (e.g., based on the total number of items), bind the prop to a computed property or data variable:

<script setup>
import { ref, computed } from 'vue'

const yourDataset = ref([/* Your data here */])

const dynamicPageSizes = computed(() => {
  return [
    5, 10, 25,
    { text: 'Show All', value: yourDataset.value.length }
  ]
})
</script>

<template>
  <v-data-table
    :items="yourDataset"
    :headers="tableHeaders"
    :items-per-page-options="dynamicPageSizes"
    items-per-page="10"
  ></v-data-table>
</template>

That's all you need! This will replace the default dropdown with your custom page size options.

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