el-pagination的使用及修改默认样式

前言

最近在项目中要用到分页组件，由于项目是使用element-plus搭建的，所以直接引用了组件库中的el-pagination，在此记录用法以及默认样式更改。

一、使用方法

1）来到Element-plus官网，复制代码到项目中

          <el-pagination
            class="white-list-tool"
            background
            :hide-on-single-page
            :page-size="8"
            :total="dataNumber"
            layout="prev, pager, next"
            @current-change="changePage"
          ></el-pagination>

这里的参数我是匹配自己项目，选择性使用的（一般来说这些参数就足够了），如有额外需求，可查看官网去相应配置。说几个关键的参数。
①hide-on-single-page：控制只有一页数据时该组件是否展示。
②page-size:每页展示的数据条数。
③total：数据总共的条数
④@current-change=”changePage“事件：对应换页时的触发事件，changePage默认接受一个参数val：number，即当前页码值。

    const changePage = (val: number) => {
      const dataArr = searchWhiteList();
      arr.uidList = dataArr.slice((val - 1) * 8, 8 * val);
    };

如上例这里的dataArr是一个接受后台返回数据的数组，arr.uidList则是结合v-for渲染ul的数组，这样处理就能达到每页展示八个数据的效果。

二、更改默认样式

这里有一个坑点，即style样式区不可添加scoped属性，在background下的样式更改代码：

.white-list-tool.is-background .el-pager li:not(.disabled).active {
  background-color: #409eff;
  color: #fff;
}
.white-list-tool.is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
.white-list-tool.is-background .el-pager li:hover {
  color: #409eff;
}
.white-list-tool.is-background .el-pager li:not(.disabled):hover {
  color: #409eff;
}
.white-list-tool.is-background .el-pager li:not(.disabled).active:hover {
  background-color: #409eff;
  color: #fff;
}
//按钮
.white-list-tool.is-background .btn-next .el-icon-arrow-right {
  margin: 0 auto;
}
.white-list-tool.is-background .btn-prev .el-icon-arrow-left {
  margin: 0 auto;
}