ant design vue Pagination 分页组件属性

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

Pagination属性

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

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>

例子