会先调用@on-Change回到第一页，再调用@on-page-size-change改变分页显示数量。这样会先拿一遍第一页当前的pageSize的数据，再拿一遍第一页改变后的pageSize的数据。求教该怎么解决？

Bug Approved.
Validate Code:

<template>
    <div>
        <Page @on-change="test" @on-page-size-change="test2" :total="100" :current="current" show-sizer></Page>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                current: 2
            }
        },
        methods: {
            test() {
                console.log('test')
            },
            test2() {
                console.log('test2')
            }
        }
    }
</script>

@icarusion

node_modules/iview/src/page

changePage (page) {
  if (this.currentPage != page) {
     this.currentPage = page;
     this.$emit('on-change', page);
  }
},
onSize (pageSize) {
  this.currentPageSize = pageSize;
  this.changePage(1);
  this.$emit('on-page-size-change', pageSize);
}

Validate Code:
https://jsfiddle.net/136446529/62zmv3k0/4/

插件中的this.currentPageSize还没props给实例已经调用了this.changePage，this.changePage则传给监听器一次回调

方案: 更改node_modules/iview/src/page中的onSize

onSize (pageSize) {
  this.currentPageSize = pageSize;
  // this.changePage(1);
  this.$emit('on-page-size-change', pageSize);
}

这样实例上可以根据需求自行changePage

@Yougoss 临时可以修改node_modules/iview/dist/iview.js#12838

当前如果不是第一页，切换每页条数时就会到第一页，自如要触发on-change。业务中只需要监听 on-change 就可以

@icarusion 只监听on-change的话，改变每页条数的话，不会触发on-change了，导致数据展示错误。

@icarusion 当切换pageSize时，只监听on-change会有会有两种情况：

1. currentPage != 1, 这是on-change会触发，这时没有问题。
2. 如果currentPage == 1时， on-change不会触发，这时候pageSize无论怎么变化，都不会重新刷新数据。

建议不管currentPage 是否等于1 都触发on-change

建议从框架层面去掉onSize (pageSize)函数中的this.changePage(1);
把更多控制权交给框架使用者。

改变pageSize同时触发changePage 我的解决方法：
在data里设置个flag，默认false
isChangePageSizeFlag: false
在改变pageSize的方法里，将flag置为true，
changePageSize (pageSize) { this.isChangePageSizeFlag = true; //ajax请求代码.... }
在changePage方法里，当flag为true直接return。
changePage (page) { /**@warn *isChangePageSizeFlag用于防止改变pageSize触发changePage方法 */ if(this.isChangePageSizeFlag){ return;} //ajax代码.... }

我的解决方法是：
在changePageSize中只做data.pageSize的更新，然后组件会自动调用changePage，所以只需要在changePage中调用数据请求就可以了。

<Page :total="totalResults" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize" show-sizer show-elevator show-total></Page>

data () {
    return {
        tableData: this.requestData(1, 10),
        pageIndex: 1,
        pageSize: 10,
        totalResults: 0
     }
},
methods: {
    requestData (currentPage, pageSize) {
    ......
    },
    changePage (currentPage) {
           this.tableData = this.requestData(currentPage, this.pageSize);
    },
    changePageSize (pageSize) {
           this.pageSize = pageSize;
    }
    ...
}

不在第一页的时候，触发on-page-size-change的同时触发on-change真的是很坑爹啊.

有这样一个方案可以解决：
查看 page 源码可以发现，当改变每页条数的时候会先触发 on-page-size-change ，然后才会触发 on-change, 可以在处理on-page-size-change 的时候设置一个标识来判断是否需要在 on-change 里面获取数据，然后在 on-page-size-change 获取数据后，又将这个标识设置为 true，这样当点击页码的时候就可以再次触发 on-change 了。示例代码如下：

<template>
  <div>
    <Page @on-change="listPageChange" @on-page-size-change="listPageSizeChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isGetList: true
    }
  },
  methods: {
    listPageChange(e) {
      if (this.isGetList) {
        // get list data
      }
    },
    listPageSizeChange(e) {
      this.isGetList = false
      // get list data
      // some code
      this.isGetList = true // 获取数据完成后设置为 true
    }
  }
}
</script>

<style>
</style>

/* 扩展iview的Page组件，拦截默认行为==>pageSize变化时，也会触发page-change事件 */
import { Page } from 'iview';

export default {
extends: Page,
mixins: [
{
methods: {
onSize(pageSize) {
this.currentPageSize = pageSize;
this.$emit('on-page-size-change', pageSize);
// this.changePage(1);
},
}
}
]
}

使用mixins拦截默认的onSize事情：去掉调用触发page-size的方法

在changePageSize 事件中判断一下 pageNum， 如果pageNum == 1 就 触发事件.

<Page v-bind="pagination" :pageSize="pageOptions.pageSize" :total="dataList.total" :current.sync="pageOptions.pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize"></Page>
 computed: {
    page() {
      return {
        pageSize: this.pageOptions.pageSize,
        pageNum: this.pageOptions.pageNum
      }
    },
  },
  methods: {
    // 修改页数
    changePageNum(){
      this.$emit('handlePageSize', this.page)
    },
    // 修改每页大小
    changePageSize(size){
     this.pageOptions.pageSize = size
     this.pageOptions.pageNum === 1 && this.changePageNum()
    },
  }