如何修改Vuetify中v-pagination的可见元素截断行为

问题分析 #

你遇到的差异大概率是Vuetify 3.5.2版本中v-pagination组件对total-visible属性的逻辑处理问题。在该版本中，当total-visible设为奇数（如7）且当前页码处于起始位置时，组件会采用「前N个+省略号+后N个」的对称分布逻辑（3个前置页码+省略号+3个后置页码），而新版Vuetify调整了这个逻辑——当当前页码在起始段时，会优先填满前置页码，再显示省略号和最后一页。

具体解决思路 #

1. 升级Vuetify版本 #

这是最简单的方案。后续稳定版（如3.6+）的Vuetify已经修复了该页码分布逻辑问题，升级后v-pagination会自动按照你期望的方式显示（1 2 3 4 5 6 ... 20）。

2. 自定义页码生成逻辑 #

如果暂时无法升级版本，可以手动控制页码的显示列表，完全自定义省略号位置：

步骤1：编写计算属性生成可见页码数组

在组件的script部分添加计算属性，根据当前页码、总页数和需要显示的页码数量，生成包含省略号的页码列表：

<script setup>
import { ref, computed } from 'vue';

const page = ref(1);
const totalPages = 20;
const totalVisible = 7;

const visiblePages = computed(() => {
  const pages = [];
  
  // 总页数小于等于显示数量时，直接显示所有页码
  if (totalPages <= totalVisible) {
    for (let i = 1; i <= totalPages; i++) pages.push(i);
    return pages;
  }
  
  // 当前页处于起始区域，优先显示前totalVisible-1个页码+省略号+最后一页
  if (page.value <= Math.floor(totalVisible / 2)) {
    for (let i = 1; i <= totalVisible - 1; i++) pages.push(i);
    pages.push('...');
    pages.push(totalPages);
  } 
  // 当前页处于末尾区域，显示第一页+省略号+后totalVisible-1个页码
  else if (page.value >= totalPages - Math.floor(totalVisible / 2)) {
    pages.push(1);
    pages.push('...');
    for (let i = totalPages - totalVisible + 2; i <= totalPages; i++) pages.push(i);
  }
  // 当前页处于中间区域，显示首尾+省略号+当前页前后页码
  else {
    pages.push(1);
    pages.push('...');
    const half = Math.floor((totalVisible - 4) / 2);
    for (let i = page.value - half; i <= page.value + half; i++) pages.push(i);
    pages.push('...');
    pages.push(totalPages);
  }
  
  return pages;
});
</script>

步骤2：自定义分页组件结构

用Vuetify的按钮组替代原生v-pagination，渲染我们生成的页码列表：

<template>
  <v-btn-group>
    <!-- 上一页按钮 -->
    <v-btn 
      :disabled="page === 1"
      @click="page = Math.max(1, page - 1)"
    >
      <v-icon>mdi-chevron-left</v-icon>
    </v-btn>
    
    <!-- 页码项 -->
    <v-btn 
      v-for="(item, idx) in visiblePages" 
      :key="idx"
      :variant="item === page ? 'elevated' : 'text'"
      :disabled="item === '...'"
      @click="item !== '...' && (page = item)"
    >
      {{ item }}
    </v-btn>
    
    <!-- 下一页按钮 -->
    <v-btn 
      :disabled="page === totalPages"
      @click="page = Math.min(totalPages, page + 1)"
    >
      <v-icon>mdi-chevron-right</v-icon>
    </v-btn>
  </v-btn-group>
</template>

3. 排查自定义样式干扰 #

检查项目中是否有全局或局部的CSS修改了v-pagination__more元素的显示逻辑，比如强制修改了它的位置或隐藏了部分页码项。可以通过浏览器开发者工具查看元素样式，确认是否有自定义样式覆盖了Vuetify的默认样式。

内容的提问来源于stack exchange，提问作者Denys Khomiakov