ElementUI之el-pagination样式修改（小三角、“前往”、页码数）

需求：设计给的 UI 如图

众所周知，el-pagination原本样式是这样式的：

注意看，不一样的地方：

• 小三角样式不一样，需要实心的
• “前往” 二字改成了 “跳到”
• 页码数的字体颜色背景色不一样

 解决：

1、小三角样式

<style lang="scss" scoped>

  /deep/ .el-icon-arrow-right:before {
    content: '';//右边“下一页”三角箭头
  }
  /deep/ .el-icon-arrow-left:before {
    content: '';//左边“上一页”三角剪头
  }

</style>

2、“前往”二字修改

//js代码
  mounted() {
    let pageText = document.getElementsByClassName('el-pagination__jump')[0]
    if (pageText) { //可能存在不显示页码的情况，所以最好判断一下避免报错~
      pageText.childNodes[0].nodeValue = '跳到'
    }
  },

3、页码数字样式修改

<style lang="scss" scoped>

  /deep/ .el-pager li {
    min-width: 24px;//一定要加！不然默认的宽度是32px
    width: 24px;
    height: 24px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    border-radius: 4px;
    color: #626469; //字体颜色
    background: #ffffff; //背景色
    line-height: 24px;
    &.active { //选中时字体颜色、背景色变化
      color: #fb4a3e;
      background: #fee6e5 center center no-repeat;
    }
  }

</style>

结果：

勉强实现效果了吧~

---

参考文章：el-pagination修改默认的文字“前往”（记录一下）