默认的每页行数将覆盖Vuetify 1.5.2中v-data-iterator中的items- per -page属性

Question

我正在开发一个使用Vuetify 1.5.2的vue.js应用程序。我在设置v-data-iterator的每页项目属性时遇到了问题：

            <v-data-iterator
              :items="facilities"
              :items-per-page.sync="facilitiesPerPage"
              content-tag="v-layout"
              rows-per-page-text="Facilities per page"
              row
              wrap
            >
                <v-flex slot="item" slot-scope="props" xs12 sm6 md4 lg3 x12>
                    <facility :facility="props.item"></facility>
                </v-flex>
            </v-data-iterator>

            data: () => ({
                facilitiesPerPage: 4,
                facilities: [],
                ...
            })

根据这一点，我认为数据迭代器将每页显示4个项目。但事实并非如此。它似乎默认设置为页脚中设置的每页项目数。由于我们没有显式地设置每页项目行数，因此默认设置为5、10、25、'All'，默认情况下选择5：

​

​

这似乎覆盖了每页项目的值。

我们要做的是使每页项目值动态变化，根据屏幕宽度变化。我们水平布局我们的项目，如果需要，可以包装成多行，所以我们希望每行有多少项目就能在屏幕宽度内容纳多少。然后，基于该数字乘以行数来计算facilitiesPerPage。

我们想要这样的东西：

https://www.codeply.com/p/bFrSEsnq4L

但这只在Vuetify 2.0中有效，我们必须处理Vuetify 1.5.2。因此，我们正在尝试定制我们自己的设计。

现在阻碍我们的是每页项目的默认数量似乎覆盖了我们为每页项目设置的数量。在Vuetify 1.5.2中有什么方法可以防止这种情况发生吗？

谢谢。

Answer 1

在Vuetify 1.5.2版本中，可以动态更改每页项目数。

这里的

是工作代码：https://codepen.io/chansv/pen/oNjqNoG?editors=1010

要实现这一点，您必须使用以下道具：

在版本1.5.2中，它不是每页项目数，而应该是:rows-per-page-items

要设置每页文本行数，您可以使用此属性:rows-per-page-text="'Facilities per page'"

动态选择每页行数的值，您可以使用此props :pagination.sync="paginationSync"并将object中的值设置为{rowsPerPage: 30} // 10、20或任何

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
      :rows-per-page-items="rowsPerPage"
      :rows-per-page-text="'Facilities per page'"
      :pagination.sync="paginationSync"
    >
      <template v-slot:items="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
  </v-app>
</div>

new Vue({
  el: '#app',
  data () {
    return {
      paginationSync: {rowsPerPage: 30},
      rowsPerPage: [10, 20, 30, 40, 50],
      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%'
        }
      ]
    }
  }
})