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を取得する方法は非常に不明確であり、itemsPerPageを設定する場合、options
は反応的な小道具として機能しないようです。 pagination.syncと同等の現在の方法を知っている人がいれば、高く評価されます。
vuetify 2.xを使用して、ページごとのアイテムとページごとの行を設定できます
これがアプローチです、データテーブルコンポーネントで以下のプロパティを使用します
:items-per-page="5"
ページごとの項目を直接数値として設定するか、データ反応性プロパティに割り当てて動的に更新できます
ページごとの行も、このプロパティをデータテーブルに追加
:footer-props = "footerProps"
スクリプト内
data(){
return {
footerProps: {'items-per-page-options': [15, 30, 50, 100]},
}
}
ここで動作しているコードペンを見つけます:
https://codepen.io/chansv/pen/gOOGPdR?editors=101
作業コード:
<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);
},
}
})