ant design vue Pagination 分页组件change showSizeChange事件

ant design vue Pagination 分页组件总共有两个事件，分别是切换页码change事件和更改每页显示多少条数据的showSizeChange事件。

change事件

页码改变时的回调事件，参数是改变后的页码及每页条数

// *********************** npm方式 *************************
<template>
 <a-locale-provider :locale="locale">
  <a-pagination  
   :pageSize="10" 
   v-model="current"
   :pageSizeOptions="pageSizeOptions"
   :showSizeChanger="true" 
   :total="60"
   @change="change"
    />
     </a-locale-provider>
</template> 
<script>
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
  export default {
     data() {
                return {
                    locale: zhCN,//国际化 设置成中文 www.itxst.com
                    current: 2,
                    pageSizeOptions:['10', '50', '100'] ,//下拉选择每页显示多少条 
                };
    },
    methods: {
     //************** 页码改变时回调事件 *************
      change(current, pageSize) {
          //  current 改变后的页码，pageSize 每页显示条数
          console.log("log:",current, pageSize);
      },
    },
  };
</script>

// *********************** 浏览器方式 *************************
<div id="app">
    <a-pagination show-size-changer
                  :page-size.sync="pageSize"
                  @change="change" 
                  :total="500"
                  v-model="current"
                  :page-size-options="pageSizeOptions">
        <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value!=='100'">{{props.value}}台/页</span>
            <span v-if="props.value==='100'">全部数据</span>
        </template>
    </a-pagination>
</div>
<script>
      Vue.use(window['vue-dash-event']);
        var app = new Vue({
            el: '#app',
            data() {
                return {
             pageSizeOptions: ['30', '50', '100'],
             pageSize: 30,
             current: 4,
                };
            },
          watch: {
      pageSize(val) {
         console.log('pageSize', val);
      },
      current(val) {
        //console.log('current', val);
      },
    },
    methods: {
     //************** 页码改变时回调事件 *************
      change(current, pageSize) {
          //current 改变后的页码，pageSize 每页显示条数
          console.log("log:",current, pageSize);
      },
     },
        });
</script>

showSizeChange事件

// *********************** npm方式 *************************
<div id="app">
    <a-pagination show-size-changer
                  :page-size.sync="pageSize"
                  v-on:show-size-change="onShowSizeChange"
                  :total="500"
                  v-model="current"
                  :page-size-options="pageSizeOptions">
        <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value!=='100'">{{props.value}}台/页</span>
            <span v-if="props.value==='100'">全部数据</span>
        </template>
    </a-pagination>
</div>
<script>
    Vue.use(window['vue-dash-event']);
    var app = new Vue({
        el: '#app',
        data() {
            return {
                pageSizeOptions: ['30', '50', '100'],
                pageSize: 30,
                current: 4,
            };
        },
        methods: {
           //pageSize 变化的回调事件 current当前页码，pageSize每页显示条数
            onShowSizeChange(current, pageSize) { 
                console.log("onShowSizeChange", current, pageSize);
            },
        },
    });
</script>

例子