I'm trying to get the selected items-per-page on a Vuetify data-table. It seems some breaking changes have been made. I followed this example: How to set initial 'rows per page' value in Vuetify DataTable component?
Which uses
<v-data-table
:headers="headers"
:items="equipment"
class="elevation-1"
:rows-per-page-items="[15, 30, 50, 100]"
:pagination.sync="pagination">
And
data() {
return {
pagination: {
rowsPerPage: 30
}, ...
}
}
To get the currently-selected rowsPerPage
. This prints an error like so: [BREAKING] 'pagination' has been removed, use 'options' instead. For more information, see the upgrade guide https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide
[BREAKING] 'pagination' has been removed, use 'options' instead. For more information, see the upgrade guide https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide
I looked through the upgrade guide and there was very little there in the way of footer control of pagination, or how to sync the selected rows-per-page now. I tried using options
and looking through the code for the table here:
However it's very unclear how to retrieve the selected itemsPerPage, and the options
don't seem to work as a reactive prop when setting itemsPerPage. If anyone is aware of the current way to do the equivalent of pagination.sync, it'd be highly appreciated.
You can set items per page and rows per page using vuetify 2.x
Here is the approach, use the below property in data table component
:items-per-page="5"
you can set items per page as number directly or assign to data reactivity property and dynamically update
also rows per page, add this property to data table
:footer-props="footerProps"
In script
data(){
return {
footerProps: {'items-per-page-options': [15, 30, 50, 100]},
}
}
Find the working codepen here:
https://codepen.io/chansv/pen/gOOGPdR?editors=1010
Working code:
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
:footer-props="footerProps"
@update:items-per-page="getItemPerPage"
></v-data-table>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
footerProps: {'items-per-page-options': [5, 10,15, 30, 50, 100]},
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
},
methods: {
getItemPerPage(val) {
console.log(val);
},
}
})
Easy way: :footer-props="{ itemsPerPageOptions: [25,50,100,-1]}"
Note that -1 is for add 'All' to the options
For anyone who, like me, was looking for the new option to show all rows by default, it has now changed (- working in v2.2.11):
Old way
:pagination.sync="{ rowsPerPage: -1 }"
New way
:items-per-page="-1"
Not sure if items and rows are used interchangeably but this caught me out for a while.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.