ant design vue Pagination 分页组件属性

ant design vue pagination 分页组件属性列表的使用方法，npm和浏览器使用方法的区别。

Pagination属性

名称	说明	类型	默认值
current(v-model)	当前显示在第几页	number	-
defaultCurrent	默认的当前页数	number	1
defaultPageSize	默认的每页条数	number	10
hideOnSinglePage	只有一页时是否隐藏分页器	boolean	false
itemRender	用于自定义页码的内容（具体内容查看左边菜单）	函数	-
pageSize	每页条数，设置此属性defaultPageSize将失效	number	-
pageSizeOptions	下拉框指定每页显示条数	string[]	['10', '20', '30' , '40']
showQuickJumper	显示快速跳转至某页的输入框	boolean	false
showSizeChanger	是否可以改变 pageSize 和pageSizeOptions配合使用	boolean	false
showTotal	显示数据总数	Function(total, range)	-
simple	是否为简洁模式	boolean	-
size	分页组件尺寸大小可设置为small	string	-
total	数据总数	number	0

node.js webpack代码例子

<template>
 <a-locale-provider :locale="locale">
  <a-pagination 
  :defaultCurrent="3" 
  :defaultPageSize="20" 
  :pageSize="10"
   :hideOnSinglePage="showSizeChanger" 
   :pageSizeOptions="pageSizeOptions"
   :showSizeChanger="true"
   :showQuickJumper="showQuickJumper"
   :showTotal="showTotal"
   :itemRender="itemRender"
   :total="60" />
     </a-locale-provider>
</template>
<style >
  .ant-pagination-item-link.red {
            color: red;
            padding-left: 6px;
            padding-right: 6px;
    }
</style>
<script>
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
  export default {
     data() {
                return {
                    locale: zhCN,//国际化 设置成中文
                    current: 2,
                    pageSizeOptions:['10', '50', '100','200'] ,//下拉选择每页显示多少条
                    showSizeChanger:true, //显示下拉选项
                    showQuickJumper:true,//显示跳转输入框 
                };
    },
    methods: {
      showTotal:function(total, range){
            return "第"+range[0]+"至"+range[1]+"/总计："+total;
      },
      itemRender(current, type, originalElement) {
            if (type === 'prev') {
                originalElement.children = undefined;
                originalElement.text = "上一页";
                originalElement.data.class = originalElement.data.class + " red"
                return originalElement;
            } else if (type === 'next') {
                originalElement.children = undefined;
                originalElement.text = "下一页";
                originalElement.data.class = originalElement.data.class + " red"
                return originalElement;
            }
            return originalElement;
        },
    },
  };
</script>

浏览器方式

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ant design vue Pagination 属性例子</title>
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/ant-design-vue/antd.min.js"></script>
    <script src="https://www.itxst.com/package/ant-design-vue/antd-with-locales.min.js"></script>
    <link href="https://www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
    <style>
        body {
            padding-top: 10px
        }
        .ant-pagination-item-link.red {
            color: red;
            padding-left: 6px;
            padding-right: 6px;
        }
    </style>
</head>
<body>
    <div id="app">
        <a-locale-provider :locale="locales.zh_CN">
            <a-pagination :default-current="3"
                          :default-pageSize="20"
                          :page-size="10"
                          :hide-on-singlePage="showSizeChanger"
                          :page-size-options="pageSizeOptions"
                          :show-size-changer="true"
                          :show-quick-jumper="showQuickJumper"
                          :show-total="showTotal"
                          :item-render="itemRender"
                          :total="60" />
        </a-locale-provider>
    </div>
    <script>
        const { LocaleProvider, locales } = window.antd;
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    current: 2,
                    pageSizeOptions: ['10', '50', '100', '200'],//下拉选择每页显示多少条
                    showSizeChanger: true, //显示下拉选项
                    showQuickJumper: true,//显示跳转输入框
                };
            },
            methods: {
                showTotal: function (total, range) {
                    return "第" + range[0] + "至" + range[1] + "/总计：" + total;
                },
                itemRender(current, type, originalElement) {
                    if (type === 'prev') {
                        originalElement.children = undefined;
                        originalElement.text = "上一页";
                        originalElement.data.class = originalElement.data.class + " red"
                        return originalElement;
                    } else if (type === 'next') {
                        originalElement.children = undefined;
                        originalElement.text = "下一页";
                        originalElement.data.class = originalElement.data.class + " red"
                        return originalElement;
                    }
                    return originalElement;
                },
            },
        });
    </script>
</body>
</html>

例子