antd vue修改分页_ant design vue Pagination 分页组件属性

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代码例子

:defaultCurrent="3"

:defaultPageSize="20"

:pageSize="10"

:hideOnSinglePage="showSizeChanger"

:pageSizeOptions="pageSizeOptions"

:showSizeChanger="true"

:showQuickJumper="showQuickJumper"

:showTotal="showTotal"

:itemRender="itemRender"

:total="60" />

.ant-pagination-item-link.red {

color: red;

padding-left: 6px;

padding-right: 6px;

}

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;

},

},

};

浏览器方式

ant design vue Pagination 属性例子

body {

padding-top: 10px

}

.ant-pagination-item-link.red {

color: red;

padding-left: 6px;

padding-right: 6px;

}

: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" />

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;

},

},

});

例子