如何将Element UI的el-pagination数字页码改为点状样式？

可以通过自定义CSS覆盖Element组件的默认样式来实现，具体步骤如下：

1. 给分页组件添加自定义类 #

为避免影响全局分页组件，先给目标el-pagination添加专属类名：

<el-pagination
  class="dot-style-pagination"
  layout="prev, pager, next"
  :total="100"
  <!-- 其他配置项 -->
></el-pagination>

2. 编写自定义CSS样式 #

通过隐藏原有页码数字，用背景色和圆角实现点状效果，同时区分激活状态：

/* 基础点状样式 */
.dot-style-pagination .el-pager li {
  font-size: 0; /* 隐藏数字 */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #c0c4cc; /* 默认点状颜色 */
  margin: 0 5px;
  border: none; /* 移除默认边框 */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 当前激活页码的样式 */
.dot-style-pagination .el-pager li.is-active {
  background-color: #409eff; /* Element主题色，可自行修改 */
}

/* 可选：鼠标悬浮效果 */
.dot-style-pagination .el-pager li:hover:not(.is-active) {
  background-color: #909399;
}

3. 针对scoped样式的处理 #

如果是在Vue单文件组件的scoped样式中编写，需要使用深度选择器穿透组件样式隔离：

<style scoped>
::v-deep .dot-style-pagination .el-pager li {
  /* 样式代码同上 */
}

::v-deep .dot-style-pagination .el-pager li.is-active {
  /* 样式代码同上 */
}
</style>

你可以根据需求调整点状的尺寸、颜色、间距等参数，完全匹配预期效果。

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