Как сделать пагинацию Vue.js?

Пользователь

от raina , в категории: JavaScript , год назад

Как сделать пагинацию Vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от fred , 5 месяцев назад

@raina 

Для реализации пагинации в Vue.js вы можете использовать компонент vue-pagination-2. Этот компонент предоставляет стандартный интерфейс для пагинации, который включает кнопки "предыдущая" и "следующая", а также список страниц. Он также поддерживает настраиваемый размер страницы и количество страниц, которые отображаются одновременно.


Чтобы использовать этот компонент, вам нужно установить его с помощью npm:

1
npm install vue-pagination-2


Затем вы можете импортировать его в ваш компонент и использовать его как тег:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <div>
    <vue-pagination-2
      v-model="currentPage"
      :total="totalItems"
      :per-page="itemsPerPage"
      @pagination-change-page="changePage"
    ></vue-pagination-2>
  </div>
</template>

<script>
import VuePagination from 'vue-pagination-2'

export default {
  components: {
    VuePagination
  },
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 10,
      totalItems: 100
    }
  },
  methods: {
    changePage(page) {
      this.currentPage = page
    }
  }
}
</script>


В этом примере м