iview组件库：Page组件在其他页使用编辑保存调接口后列表刷新而Page组件页码值无法重置为第一页的解决方案

1、问题引入

截图.png

比如我点击到第二页时，需要对第二页的某条数据进行处理，处理完后保存到数据库，然后通过接口返回的数据刷新数据页面，这时，数据显示的是第一页的数据，但是页码值还是显示在第二页了，这是因为页码值未进行重置处理。

2、解决方案

2.1、Page组件代码

给你的Page上添加 ref 属性 我这里使用的是 ref="pages"

2.2、保存后的方法代码

假设保存的方法是save()，则需要在save刷新列表视图的同时重置Page组件的页码值

save(){
  ....
  //重置Page组件的页码值
  this.$refs['pages'].currentPage = 1;
}

2.3、父子组件中重置页码值

注意：如果使用的是父子组件的关系，那么还需要在父组件使用子组件中加上ref，打个比方：
父组件：parent.vue
子组件：child.vue
子组件中含有Page分页

//child子组件
....子组件其他代码

// parent.vue


save(){
  ....
  //找到子组件的Page组件去重复页码值
  this.$refs.table.$refs.pages.currentPage = 1;
}