javascript - 如何在 2.0 中获取 vuetify 数据表选择的 itemsPerPage?
问题描述
我正在尝试在 Vuetify 数据表上获取每页选定的项目。似乎已经进行了一些重大更改。我遵循了这个示例: 如何在 Vuetify DataTable 组件中设置初始“每页行数”值?
哪个用途
<v-data-table
:headers="headers"
:items="equipment"
class="elevation-1"
:rows-per-page-items="[15, 30, 50, 100]"
:pagination.sync="pagination">
和
data() {
return {
pagination: {
rowsPerPage: 30
}, ...
}
}
获取当前选中的rowsPerPage
. 这会打印如下错误:
[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
我查看了升级指南,几乎没有关于页脚控制分页的方式,或者现在如何同步每页选定的行。我尝试options
在这里使用并查看表格的代码:
但是,目前还不清楚如何检索选定的 itemsPerPage,并且options
在设置 itemsPerPage 时似乎不能作为反应性道具。如果有人知道当前执行与 pagination.sync 等效的方法,我们将不胜感激。
解决方案
您可以使用vuetify 2.x设置每页的项目和每页的行数
这是方法,在数据表组件中使用以下属性
:items-per-page="5"
您可以将每页的项目直接设置为数字或分配给数据反应性属性并动态更新
每页也有行,将此属性添加到数据表
:footer-props="footerProps"
在脚本中
data(){
return {
footerProps: {'items-per-page-options': [15, 30, 50, 100]},
}
}
在这里找到工作的codepen:
https://codepen.io/chansv/pen/gOOGPdR?editors=1010
工作代码:
<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);
},
}
})
推荐阅读
- php - 使用 XDebug 进行调试时,如何定义 PHP 对象在 VSCode 中的显示方式?
- python - 'numpy.float64' 类型的对象没有 len():我该如何解决这个问题?
- oculus - 如何在 Oculus Quest 浏览器中自动打开链接?
- r - 以向量化方式基于数据子集定义多行
- firebase - 从子集合 firestore + FLUTTER 中检索信息
- php - Laravel 关系不适用于 leftJoin
- regex - 带有可选下划线的下划线分隔表名的正则表达式
- hibernate - 如何在 hbm 文件中引用 java.time.LocalDate?
- javascript - 有没有办法通过节点运行 scrollreveal.js?
- python - 如何在 Discord.py 中检查消息是否包含表情符号?