[英]How to get vuetify data-table selected itemsPerPage in 2.0?
I'm trying to get the selected items-per-page on a Vuetify data-table.我正在尝试在 Vuetify 数据表上获取每页选定的项目。 It seems some breaking changes have been made.
似乎已经进行了一些重大更改。 I followed this example: How to set initial 'rows per page' value in Vuetify DataTable component?
我遵循了这个示例: 如何在 Vuetify DataTable 组件中设置初始“每页行数”值?
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
.获取当前选择的
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
[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:我尝试使用
options
并在此处查看表格的代码:
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/VDataTable.ts#L151 https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/VDataTable.ts#L151
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.但是,目前还不清楚如何检索选定的 itemsPerPage,并且在设置 itemsPerPage 时,这些
options
似乎不能作为反应性道具。 If anyone is aware of the current way to do the equivalent of pagination.sync, it'd be highly appreciated.如果有人知道当前执行与 pagination.sync 等效的方法,我们将不胜感激。
You can set items per page and rows per page using vuetify 2.x您可以使用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" :footer-props="footerProps"
In script在脚本中
data(){
return {
footerProps: {'items-per-page-options': [15, 30, 50, 100]},
}
}
Find the working codepen here:
在这里找到工作的codepen:
https://codepen.io/chansv/pen/gOOGPdR?editors=1010 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简单的方法:
:footer-props="{ itemsPerPageOptions: [25,50,100,-1]}"
请注意,-1 用于将“全部”添加到选项中
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):对于像我一样正在寻找默认显示所有行的新选项的任何人,它现在已经更改(-在 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.不确定项目和行是否可以互换使用,但这让我有一段时间感到困惑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.