el-pagination pageSizes展示不全

### 解决 `el-pagination` 组件 `pageSizes` 选项显示不全

在 Vue 中使用 Element UI 的 `el-pagination` 组件时，如果遇到 `pageSizes` 选项显示不全的情况，可以尝试以下几种解决方案：

#### 方案一：调整 CSS 样式
有时由于父级容器的宽度不足或其他样式冲突，可能导致下拉菜单无法完全展开。可以通过增加父级容器的宽度或修改特定样式的最小宽度来解决问题。

.el-select-dropdown__item {
    min-width: 80px;
}

这会确保每个选项有足够的空间展示[^3]。

#### 方案二：设置 `popper-class`
Element 提供了一个名为 `popper-class` 的属性用于自定义弹出层类名。通过给 `el-pagination` 添加该属性并指定一个带有适当样式的类名，能够有效防止位置偏移以及内容被裁剪的现象发生。

<template>
  <div class="pagination-container">
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalSize"
      layout="sizes, prev, pager, next"
      :page-sizes="[5, 10, 15, 20]"
      @size-change="handleSizeChange"
      popper-class="custom-popper-class"
    />
  </div>
</template>

<style scoped>
.custom-popper-class .el-select-dropdown__list {
  max-height: none !important; /* 取消最大高度限制 */
}

.pagination-container {
  width: fit-content; /* 或者其他合适的宽度 */
}
</style>

上述代码片段展示了如何利用 `popper-class` 来定制分页器中的每页条目数选择框外观，并取消其内部列表的最大高度约束以便于查看全部项。

#### 方案三：验证数据绑定准确性
确认传递给 `el-pagination` 的 `page-sizes` 属性值是一个有效的数组形式，并且这些数值确实存在于实际业务逻辑中。例如，在某些情况下可能因为网络请求失败等原因导致传入了错误的数据结构，进而影响到界面渲染效果。

export default {
  name: 'MyComponent',
  data() {
    return {
      currentPage: 1,
      pageSize: 20,
      totalSize: 200,
      validPageSizes: [5, 10, 15, 20],
    };
  },
};

这里强调要保证 `validPageSizes` 数组内只包含合法合理的整型数字作为候选值[^4]。