Javascript 如何在2.0中获取vuetify数据表selected itemsPerPage?
我正在尝试获取Vuetify数据表中每页的选定项。似乎已经做出了一些突破性的改变。我举了一个例子: 哪个使用Javascript 如何在2.0中获取vuetify数据表selected itemsPerPage?,javascript,vue.js,vuejs2,vuetify.js,Javascript,Vue.js,Vuejs2,Vuetify.js,我正在尝试获取Vuetify数据表中每页的选定项。似乎已经做出了一些突破性的改变。我举了一个例子: 哪个使用 <v-data-table :headers="headers" :items="equipment" class="elevation-1" :rows-per-page-items="[15, 30, 50, 100]" :pagination.sync="pagination"> 要获取
<v-data-table
:headers="headers"
:items="equipment"
class="elevation-1"
:rows-per-page-items="[15, 30, 50, 100]"
:pagination.sync="pagination">
要获取当前选定的行页面
。这会打印一个错误,如下所示:
[BREAKING]“分页”已被删除,请改用“选项”。有关更多信息,请参阅《升级指南》https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-内容升级指南
我浏览了升级指南,在页脚控制分页方面,或者在如何同步每页所选行方面,几乎没有什么内容。我尝试使用选项
并在此处查看表格的代码:
但是,如何检索选定的itemsPerPage还不清楚,而且设置itemsPerPage时,
选项
似乎不起反应性的作用。如果有人知道当前的pagination.sync等效方法,我们将不胜感激。您可以使用vuetify 2.x设置每页的项目和每页的行数
这是一种方法,在数据表组件中使用以下属性
:items-per-page="5"
您可以直接将每页的项目设置为数字,也可以指定给数据属性和
动态更新
另外,在每页的行数中,将此属性添加到数据表
:footer props=“footerProps”
在脚本中
data(){
return {
footerProps: {'items-per-page-options': [15, 30, 50, 100]},
}
}
在此处找到工作代码笔:
工作代码:
<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);
},
}
})
新Vue({
el:“#应用程序”,
vuetify:新的vuetify(),
数据(){
返回{
footerProps:{'items-per-page-options':[5,10,15,30,50,100]},
标题:[
{
文字:“甜点(100克),
对齐:“左”,
可排序:false,
值:“名称”,
},
{文本:'卡路里',值:'卡路里'},
{text:'Fat(g'),value:'Fat'},
{text:'Carbs(g)',value:'Carbs'},
{text:'Protein(g'),value:'Protein'},
{文本:'Iron(%)',值:'Iron'},
],
甜点:[
{
名称:“冷冻酸奶”,
卡路里:159,
脂肪:6.0,
碳水化合物:24,
蛋白质:4.0,
铁:1%,
},
{
名称:“冰淇淋三明治”,
卡路里:237,
fat:9.0,
碳水化合物:37,
蛋白质:4.3,
铁:1%,
},
{
名称:“Eclair”,
卡路里:262,
脂肪:16.0,
碳水化合物:23,
蛋白质:6.0,
铁:7%,
},
{
名字:“纸杯蛋糕”,
卡路里:305,
脂肪:3.7,
碳水化合物:67,
蛋白质:4.3,
铁:8%,
},
{
名称:“姜饼”,
卡路里:356,
脂肪:16.0,
碳水化合物:49,
蛋白质:3.9,
铁:16%,
},
{
名称:“果冻豆”,
卡路里:375,
脂肪:0.0,
碳水化合物:94,
蛋白质:0.0,
铁:0%,
},
{
名称:“棒棒糖”,
卡路里:392,
脂肪:0.2,
碳水化合物:98,
蛋白质:0,
铁:“2%”,
},
{
名称:“蜂巢”,
卡路里:408,
fat:3.2,
碳水化合物:87,
蛋白质:6.5,
铁:45%,
},
{
名称:“甜甜圈”,
卡路里:452,
脂肪:25.0,
碳水化合物:51,
蛋白质:4.9,
铁:22%,
},
{
名称:“KitKat”,
卡路里:518,
脂肪:26.0,
碳水化合物:65,
蛋白质:7,
铁:6%,
},
],
}
},
方法:{
getItemPerPage(val){
控制台日志(val);
},
}
})
对于任何像我一样希望在默认情况下显示所有行的新选项的人来说,它现在已经改变了(-在v2.2.11中工作):
老路
:pagination.sync="{ rowsPerPage: -1 }"
:items-per-page="-1"
新方式
:pagination.sync="{ rowsPerPage: -1 }"
:items-per-page="-1"
不确定项目和行是否可以互换使用,但这让我有一段时间感到困惑。简单方法:
:footer props=“{itemsPerPageOptions:[25,50100,-1]}”
请注意,-1表示将“全部”添加到选项中Hi@chans,感谢您的回复。我仍处于清除状态,如何获取当前选定的金额<代码>:itemsPerPage似乎设置了默认金额,但如果所选金额发生更改,我想知道更改的是什么。是的,可以更改值,请检查最新的代码笔changes@zavtra,以上答案的改变解决了你的问题吗?嘿,这很有效!你能在你的答案中写下代码的变化吗?(Codepen不会根据需要保留代码段)