element ui强制设置当前页码、设置高亮等问题的处理

element ui强制改变页码为1,第一页已高亮,但是点击上一次的页码时,不触发当前页函数@current-change问题处理办法:

1.分页设置如下:

2.elementUI分页代码:

<el-pagination ref="pagination" 
@size-change="sizeChangeHandle" 
@current-change="currentChangeHandle" 
:current-page="pageIndex" 
:page-sizes="[10, 20, 50, 100]" 
:page-size="pageSize" 
:total="totalPage" 
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>

3.前置设置高亮页或当前页时,上一次高亮页没有变化,还是原来的页码,致使再次点击上次高亮的页码时不触发currentChange函数,所以需要设置上一次高亮的页码为当前设置的高亮页,如下图所示:

上代码:

queryHandle(e) {
    if (e) {
        this.$nextTick(() =>{
            this.pageIndex = 1;//高亮切换,点击上次高亮的页面是,页面没发生请求(触发当前页函数)
            this.$refs.pagination.lastEmittedPage=1 //高亮页面切换 
        });
      }
    ...
}

情况二：改变了页面，但是当前高亮页面不正确的问题处理

1.出现原因,因为首次进入页面默认是total为0,这时候分页组件会强制设置当前页和高亮为1,所以需要获取到数据之后设置高亮,如下图所示:

 设置代码

this.$nextTick(() => {
     this.$refs.pagination.internalCurrentPage = this.pageIndex
})

或者在获取到总页数total时,设置高亮的页码,如下图

代码如下
this.$refs.pagination.internalCurrentPage = this.pageIndex