Vuetify, как использовать v-разбиение на страницы для отображения каждых следующих двух, трех сайтов

#vue.js #pagination #vuetify.js

#vue.js #разбивка на страницы #vuetify.js

Вопрос:

Я пытаюсь найти решение для изменения моего компонента разбивки на страницы. Я хочу отображать каждые два или каждые три сайта, используя компонент разбиения на страницы vuetify. Базовая версия позволяет отображать каждую отдельную страницу.

Шаблон:

   <div class="text-center">
    <v-pagination
      v-model="page"
      :length="4"
      prev-icon="mdi-menu-left"
      next-icon="mdi-menu-right"
    ></v-pagination>
  </div>
</template>

сценарий:

   export default {
    data () {
      return {
        page: 1,
      }
    },
  }
</script>

Таблица данных:

             <v-data-table dense

              v-model="selected"
    :headers="headers"
    :items="desserts"
    :single-select="singleSelect"
    item-key="name"
    show-select
    class="elevation-1"
       :items-per-page="7"

  > </v-data-table>

1. чего вы на самом деле хотите?? Что такое каждые два / три сайта??

2. привет @tuhin47, я использую v-data-table на своем веб-сайте (недавно я добавил код к своему вопросу), я хочу использовать компонент разбивки на страницы с моей таблицей v-data, но в стандарте я могу выбрать только один диапазон страниц в своей таблице, используя этот компонент разбивки на страницы, я хочу иметь возможностьдля отображения четных (следующих двух) или нечетных (следующих трех) страниц с данными в моей таблице.

Ответ №1:

Вам необходимо реализовать функции для next и previous событий. Здесь я пишу функцию для нажатия на next событие. Это приводит к двум сдвигам полей.

 new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      page: 1,
      length: 6
    }
  },
  methods: {
    next2() {
      if (this.page   1 <= this.length) {
        this.page = this.page   1;
      }
    }
  }
})

 <!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app id="inspire">
      <div class="text-center">
        <v-pagination v-model="page" :length="length" prev-icon="mdi-menu-left" next-icon="mdi-menu-right" @next="next2"></v-pagination>
      </div>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</body>

</html>

1. Спасибо за объяснение. Но можете ли вы дать мне подсказку, как получить два файла одним щелчком мыши? Он все еще работает для одного 🙂

2. По умолчанию для нажатия кнопки «Далее» используется один шаг. Я просто увеличиваю плюс один, чтобы сделать это 2

3. Хорошо, у меня есть предупреждение: [Vue warn]: недопустимый обработчик для события «next»: не определено

4. Возможно, это неверно, но оно начало работать, когда я заменил @ рядом с @ input . Теперь я могу управлять им четным или нечетным