VUE+Element 自定义分页 el-pagination

当在使用Element的组件时，对于数据量较大的返回数据总是会卡顿，这时则需要进行分页。
Oracle可以使用 Rownum
Mysql 则是limit
Sqlserve 使用 between and
接下来继续介绍前台页面如何分页，拿下拉列表举个栗子（其他也可以，此方法通用）

首先是官网的下拉列表，可以看出并没有自带分页的功能，这时就需要找自定义分页

我比较喜欢这种的，可以让使用者看到总条数，当然，其他的也可以，大同小异
接下来就是书写拼接

声明总页数和当前页的初始值

以上是方法，直接调用即可

<el-pagination
              class="ele-pagination"
              @current-change="getQuery"
              :page-size="100"
              layout="total, prev, pager, next"
              :total="total"
            >
</el-pagination>
 total: 0,
 current: 1,
 /**
     * 翻页
     */
    getQuery(val) {
      this.current = val;
      this.getLab();
    },
    /**
     * 获取检验项目选项
     */
    getLab(code, name) {
      api
        .post(
          "请求后端url",
          Object.assign({
            NAME: name,
            CODE: code,
            current: (this.current - 1) * 100,--这里是分页的
            pageSize: (this.current - 1) * 100 + 100,--
          })
        )
        .then((res) => {
          if (res != null && res != "" && res != "" && res != undefined) {
            res[res.length] = [];--因为使用分页控件定位在下面后会遮挡一部分，所以给一个空的让他遮挡
            this.total = res[0].count;--赋值总条数，这里我在后台查过了
            ……

示例图：
对了，还有一个定位的css代码

.ele-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 40px;
    line-height: 40px;
    background: #fff;
    text-align: center;
    width: 100%;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
}

自行搭配使用，分享技术交流