Блог

Я использую разбиение vuetify на страницы, и код выглядит примерно так:

 <v-pagination
  v-model="page"
  :length="n"
  total-visible="7"
></v-pagination>
  

Там, где n больше 7, если вы находитесь на первых нескольких страницах, будут показаны первые несколько страниц и несколько последних страниц. Я не хочу, чтобы он показывал последние несколько страниц.

Кроме того, допустим, вы находитесь на странице 14 n , будут показаны первая страница, страницы 13-15 и n -я страница. Я хочу, чтобы он показывал / — некоторый диапазон страниц вокруг страницы 14 (диапазон 2 означал бы, что видны 12-16). Через минуту я бы хотел показать только кнопки next и previous.

Что он делает:
< [ 1 ] [ 2 ] [ 3 ] … [ n -2] [ n-1 ] [ n ] >
< [ 1] … [k-1] [ k ] [ k 1] … [ n ] >

Чего я хочу:
< [ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ] … >
< … [k-1] [ k ] [ k 1] … >
~Или~
< >

Я добавил в компонент следующее, и это «сработало»:

 <style scoped>
  /deep/ .v-pagination__item{
    display: none;
  }
  /deep/ .v-pagination__more{
    display: none;
  }
</style>
  

… где «сработало» означает, что видны только стрелки next / previous.