Ant Design Vue教程

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>

例子

Catalog
快速入门 Dropdown 下拉菜单 Menu 导航菜单 Pagination 分页 Pagination 跳转 Pagination 自定义下拉选项 Pagination 选择每页数量 Pagination 自定义页码文字 Pagination 样式风格 Pagination 属性列表 Pagination 事件列表 Steps 步骤条 AutoComplete 自动填充 Cascader 级联选择 Checkbox 多选框 DatePicker 日期选择框 Input 输入框 InputNumber 数字输入框 Mentions 提及 Radio 单选框 Rate 评分组件 Select 下拉框 Slider 滑动输入条 Switch 开关