vue2 el-pagination 样式调整

### 自定义 Vue2 Element UI `el-pagination` 组件样式 为了调整 Vue2 中 Element UI 分页组件 (`el-pagination`) 的样式，可以采用多种方法来实现自定义效果。以下是几种常见的方式： #### 方法一：使用 CSS 类名覆盖默认样式 Element UI 提供了一些内置类名用于分页组件的不同部分。可以通过这些类名为特定元素应用新的样式。 ```css /* 调整整个分页器的宽度 */ .el-pagination { width: 100%; } /* 修改每一页按钮的颜色 */ .el-pager li { background-color: #f4f4f5; color: #606266; } /* 当前激活页面颜色 */ .el-pagination .active { background-color: #409eff !important; color: white; } ``` 通过这种方式可以直接修改 `.el-pagination`, `.el-pager li` 和其他相关的选择器来自定义外观[^1]。 #### 方法二：利用 `popper-class` 属性设置下拉菜单样式 对于某些情况下可能出现的下拉选项位置不正确的问题，可以在 `<el-pagination>` 标签内添加属性 `popper-class="select_bottom"` 来指定一个额外的CSS类给弹出层容器，并在此基础上进一步定制其表现形式[^2]。 ```html <template> <div class="pagination-container"> <!-- 使用 popper-class 定制下拉框 --> <el-pagination :current-page.sync="currentPage" layout="prev, pager, next" total="100" popper-class="select_bottom"></el-pagination> </div> </template> <style scoped lang="scss"> .select_bottom { /* 下拉列表底部距离 */ margin-top: 8px; &.is-multiple .el-select__tags { max-width: calc(100% - 30px); } .el-scrollbar__wrap { overflow-x: hidden!important; } .el-select-dropdown__item.selected { font-weight: normal; } } </style> ``` 这种方法特别适用于处理因浏览器渲染差异而导致的布局问题。 #### 方法三：全局引入并重写主题变量 如果项目中有多个地方需要用到相同的样式更改，则考虑创建一个新的 SCSS 文件，在其中重新定义 Element UI 主题中的公共变量，从而一次性影响所有基于该库构建出来的UI控件。 ```scss // custom-theme.scss @import "~element-ui/packages/theme-chalk/src/common/var"; $--color-primary: #ff7c7e; // 更改主要色调为粉色系 $--font-size-base: 14px; // 基础字体大小设为14像素 @include b(pagination) { @include e(button){ padding-left: $--padding-md; padding-right: $--padding-md; &:hover,&:focus{ border-color:$--border-color-hover; } } } ``` 之后只需确保此文件被编译到最终打包的应用程序中即可生效。 以上三种方案可以根据实际需求灵活选用或组合运用，以达到最佳视觉体验的同时保持良好的用户体验一致性。