ant design vue Pagination 跳转

ant design vue Pagination 跳转，用户在输入框输入页码快速跳转到指定页。

node.js webpack方式

showQuickJumper属性设置为ture即显示跳转选项

<template>
    <a-pagination showQuickJumper :defaultCurrent="2" :total="500" @change="onChange" />
</template>
<script>
    export default {
        methods: {
            onChange(pageNumber) {
                console.log('Page: ', pageNumber);
            },
        },
    };
</script>

浏览器方式

浏览器方式属性名称为show-quick-jumper

//show-quick-jumper 开启跳转页
<div id="app">
    <a-locale-provider :locale="locales.zh_CN">
        <a-pagination show-quick-jumper
                      show-size-changer
                      :page-size.sync="pageSize"
                      v-on:show-size-change="onShowSizeChange"
                      :total="500"
                      v-model="current" />
    </a-locale-provider>
</div>
<script>
   //国际化设置
    const { LocaleProvider, locales } = window.antd;
    Vue.use(window['vue-dash-event']);
    var app = new Vue({
        el: '#app',
        data() {
            return {
                pageSize: 20,
                current: 4,
            };
        },
        watch: { 
            pageSize(val) {
                console.log('pageSize', val);
            },
            current(val) {
                console.log('current', val);
            },
        },
        methods: {
            //每页显示数量变化后事件
            onShowSizeChange(current, pageSize) {
                console.log("onShowSizeChange", current, pageSize);
            },
        },
    });
</script>

例子