iView多个Pages使用同一个触发器翻页@on-change，js箭头函数异步传参数

基本的，当页面只有1个表格，带有1个翻页器的时候，代码如下：

<template>
<Table v-model="list"
        :columns="columns"
        size="small"
        :no-data-text="noDataText"
        stripe>
  <div slot="footer" style="float: right">
    <Page :current="form.page"
          :page-size="form.limit"
          :total="form.total"
          size="small"
          transfer
          show-total
          show-elevator
          style="margin-right: 10px"
          @on-change="changePage(val)"></Page>
  </div>
</Table>
</template>

<script>
export default {
  name: 'ProductInfo',
  data() {
    return {
      list:[
        {name:'Lee',hobby:'basketball'},
        {name:'Ke',hobby:'sleep'},
        ],
      columns:[
        { title: '姓名', key: 'name', minWidth: 200, align: 'center' },
        { title: '爱好', key: 'hobby', minWidth: 100, align: 'center' },
      ],
      form: {
        page: 1,
        limit: 10,
        total: 0,
      },
      noDataText='暂无数据',

   }
 },
  methods: {
    changePage(page) {
    //改变页码，触发on-change事件，调用本函数，默认传入1个参数page，为当前页码值
      this.form.page = page
      this.getList()//获取ist数据的函数
    },
    getList() {
    //此处调用后端接口，获取list
    }
 }
}

当是，当页面写了很多个Table，每个Table都带一个翻页器，每一个翻页器都要单独写一个@on-change事件对应的函数吗？我看项目里其他人负责的页面就是这样写的，每个翻页器都写一个单独的函数。其实功能都是一样的，不同的只是：

1、@on-change事件对应的函数内，调用的获取数据的函数不同；

2、@on-change默认传入的参数page（当前页面）赋值给不同变量；

我觉得可以写一个能复用的函数，于是@on-change改为：

（⚠️注意：这种方法不行滴🙅‍♂️）

@on-change="changePage(val, formName, getList)"
// val为默认传入的改变后的当前页码
// formName对应上一段代码的form，因为有多个Table，不同Table的Page对应不同form
// 所以次处，要传入对应的form的名字（form中存放page、limit、total等值）

但是报错，说未定义val。。。原来@on-change默认只能传入一个参数val，按上面那样写，就不传val进去了，呜呜呜。

这时候用箭头函数异步传参（同时，把一个函数作为参数传入），可以解决：

@on-change="((val)=>{changePages(val, firstForm, getFirstList)})"

changePages(page,pages,func){
      console.log('当前页码',page);
      pages.page = page
      console.log('数据',pages);
      func();//这是一个函数
    }