关于el-pagination 页码 更新问题

前言：

Vue的使用一般搭配element组件，但是有的组件使用起来会很坑。
比如这个el-pagination：使用他时数据的多少你还有去处理，在使用完整功能的时候。

就像我今天遇到的，在用接口获取到数据后，在页码选择展示多少数据一页，选择超出接口数据时，会出现页数没及时响应的问题。（你页面显示的1，但你页数传给接口的还是上一次参数）

这就很坑了，所以包括我和大家都觉得这是一个数据未能及时更新的问题。

正文：

所以，我在网上找了一下。结果都是用的同一个方法，就是利用v-if的特性：销毁和重新渲染进行解决
但是，我觉得这样重复操作dom是不合理的，所以我也推出了一种方法。

解决方法：

1. v-if

在el-pagination标签里添加v-if, 默认绑定为true，在获取数据的接口前销毁他（v-if置为false）,接口获取数据后用 this.$nextTick里面写（v-if置为true）

el-pagination 页码 更新问题 （分享）

2. watch + 页数重置

这个分为两种，一种为封装组件的一种为直接使用的。

一，封装组件，直接将值传回使用的组件上。使用的组件直接接收，并实时监听即可，然后更新问题则用在接收数量时，将页数置为1，再调用一次接口即可。

上代码：

封装的组件.png

接收的组件.png

接收组件监听.png

二，直接使用时，@handle-size-change和 @handle-current-change绑定的都是方法，在接收数量方法里面直接写

this.pageInfo.currentPage = 1;
this.getLists();

第二种方法这样写，因为接口拿到数据页码是直接赋值的，这里动态接收的时候，没必要接收。直接赋值，再调用接口。