97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
<template>
|
|
<a-pagination
|
|
v-if="pagination && pagination.total"
|
|
class="pagination"
|
|
:current="pager.current"
|
|
:default-current="pager.defaultCurrent"
|
|
:default-page-size="pager.defaultPageSize"
|
|
:page-size="pager.pageSize"
|
|
:page-size-options="pager.pageSizeOptions"
|
|
:show-size-changer="pager.showSizeChanger"
|
|
:show-quick-jumper="pager.showQuickJumper"
|
|
:show-total="pager.showTotal"
|
|
:total="pager.total"
|
|
@change="onPageChange"
|
|
@showSizeChange="onSizeChange"
|
|
>
|
|
<template #buildOptionText="props">
|
|
<span>{{ props.value }}条/页</span>
|
|
</template>
|
|
</a-pagination>
|
|
</template>
|
|
|
|
<script>
|
|
function getPagination() {
|
|
return {
|
|
current: 1,
|
|
defaultCurrent: 1,
|
|
defaultPageSize: 10,
|
|
pageSize: 10,
|
|
pageSizeOptions: ["10", "20", "30"],
|
|
// showQuickJumper: true,
|
|
showSizeChanger: true,
|
|
showTotal: (total) => `共 ${total} 条`,
|
|
total: 0,
|
|
};
|
|
}
|
|
|
|
export { getPagination };
|
|
|
|
export default {
|
|
name: "Pagination",
|
|
props: {
|
|
pagination: {
|
|
type: Object,
|
|
default: () => getPagination(),
|
|
},
|
|
},
|
|
computed: {
|
|
pager() {
|
|
const pag = getPagination();
|
|
const {
|
|
current = pag.current,
|
|
defaultCurrent = pag.defaultCurrent,
|
|
defaultPageSize = pag.defaultPageSize,
|
|
pageSize = pag.pageSize,
|
|
pageSizeOptions = pag.pageSizeOptions,
|
|
showQuickJumper = pag.showQuickJumper,
|
|
showSizeChanger = pag.showSizeChanger,
|
|
showTotal = pag.showTotal,
|
|
total = pag.total,
|
|
} = this.pagination;
|
|
return {
|
|
current,
|
|
defaultCurrent,
|
|
defaultPageSize,
|
|
pageSize,
|
|
pageSizeOptions,
|
|
showQuickJumper,
|
|
showSizeChanger,
|
|
showTotal,
|
|
total,
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
onPageChange(page, pageSize) {
|
|
this.$emit("change", page, pageSize);
|
|
},
|
|
onSizeChange(current, size) {
|
|
this.$emit("showSizeChange", current, size);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.pagination {
|
|
display: inline-flex;
|
|
justify-content: flex-end;
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-radius: 0 0 2px 2px;
|
|
width: 100%;
|
|
}
|
|
</style>
|