количество строк по умолчанию на странице переопределяет атрибут элементов на странице в v-data-iterator в Vuetify 1.5.2

Question

Я работаю над приложением vue. js, которое использует Vuetify 1.5.2. У меня возникли проблемы с установкой атрибута элементов на страницу для 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:

Похоже, это переопределяет значение количества элементов на страницу.

Мы хотим сделать динамическое значение количества элементов на странице c, изменяющееся в зависимости от ширина экрана. Мы располагаем наши элементы горизонтально, при необходимости объединяя их в несколько строк, поэтому нам нужно столько элементов в строке, сколько может поместиться в ширину экрана. В этом случае необходимо вычислить объект servicesPerPage на основе этого числа, умноженного на количество строк.

Нам нужно что-то вроде этого:

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-text = "'Удобства на страницу'"

Динамически выберите значение для строк на страницу, вы можете использовать эти реквизиты : pagination.sync = "paginationSyn c" и установить значение в объекте как {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%'
        }
      ]
    }
  }
})