el-pagination分页-自定义左右箭头样式

1，官方样式：

 

查了网上，有人说可以用slot插槽，但是试过之后，因为 不能插入多个 slot（没法定义名字做区分），所以导致左右按钮一样了。。 

2，还有种方法：

利用

prev-text  和  next-text 设置文字，替代图标显示的上下页

3，最终解决办法:

从根部改变按钮所用 icon 图标的content， 随意改成你想要的图标，就可以了。（不过还是只能用 elm本身的icon。）

 

附上代码：

    .btn-prev {
      margin-left: 0;
      margin-right: 5px;
      .el-icon-arrow-left:before {
        content: "e6ea";
      }
    }
    .btn-next {
      margin-left: 5px;
      margin-right: 0;
      .el-icon-arrow-right:before {
        content: "e6e9";
      }
    }

最终效果：

另外写一下 相关的自定义样式 （active, hover 时）

    .btn-next.disabled,
    .btn-next:disabled,
    .btn-prev.disabled,
    .btn-prev:disabled,
    .el-pager li.disabled {
      opacity: 0.5;
      cursor: default;
      pointer-events: none;
    }
    .el-pager {
      .active {
        background-color: #ff7d00 !important;
        color: #fff;
      }
      li:not(.active):hover {
        color: #ff7d00 !important;
      }
    }