Vue Tables 2 perPageValues选项异常：大数值无法完整显示

我之前在使用vue-tables-2时也碰到过类似的分页下拉选项截断问题，结合你的描述来看，核心诱因和解决办法可以从这几个方向入手：

一、问题诱因分析 #

1. 插件隐性的最大行数限制：vue-tables-2内部有一个maxPerPage的默认配置（文档可能没明确强调），默认值大概率是25或更低。当你设置的perPageValues中数值超过这个默认阈值时，插件会自动过滤掉超出的选项，这就是为什么20以上的数值偶尔不显示，而小数值列表能正常展示的原因。
2. CSS样式截断（可能性较低）：如果下拉菜单的容器被设置了固定max-height和overflow:hidden，当选项过多时可能被截断，但你提到小数值列表能完整显示，这个概率相对小，但也可以排查。

二、无需修改源码的解决办法 #

1. 显式设置maxPerPage配置 #

这是最直接有效的方案，只要把maxPerPage的值设为比你perPageValues中最大数值更大的数，就能让所有选项正常显示。示例代码如下：

new Vue({
  el: '#app',
  data: {
    tableOptions: {
      perPageValues: [10,25,50,100,500,1000],
      maxPerPage: 2000 // 设为大于1000的数值即可
    }
  }
})

这个配置会覆盖插件的默认阈值，确保所有你定义的分页选项都能被渲染出来。

2. 排查并修复下拉菜单样式 #

如果上述方法无效，可以打开浏览器开发者工具，找到分页下拉菜单的DOM元素，检查是否有max-height、overflow之类的样式导致选项被截断。如果有，手动添加CSS覆盖：

/* 针对vue-tables-2的下拉菜单样式 */
.vt-pagination .dropdown-menu {
  max-height: none !important;
  overflow-y: visible !important;
}

3. 改用对象数组格式定义选项 #

部分版本的vue-tables-2在处理纯数值数组时可能有过滤逻辑，但对对象数组的兼容性更好。你可以尝试把perPageValues改成对象数组的形式：

perPageValues: [
  { text: '10条', value: 10 },
  { text: '25条', value: 25 },
  { text: '50条', value: 50 },
  { text: '100条', value: 100 },
  { text: '500条', value: 500 },
  { text: '1000条', value: 1000 }
]

这种方式可以绕过插件内部对纯数值的过滤逻辑，确保所有选项都能显示。

内容的提问来源于stack exchange，提问作者Alexey Shabramov