pagination居中
时间: 2023-12-16 17:04:43 浏览: 30
要让pagination居中,可以使用Ant Design 5中的align属性。具体实现方法如下:
```html
<template>
<div class="pagination-wrapper">
<a-pagination
:current="currentPage"
:total="total"
:page-size="pageSize"
@change="handleChange"
align="center"
/>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 100,
};
},
methods: {
handleChange(page) {
this.currentPage = page;
},
},
};
</script>
<style>
.pagination-wrapper {
display: flex;
justify-content: center;
}
</style>
```
在上述代码中,我们使用了Ant Design 5中的a-pagination组件,并将align属性设置为"center",即可让分页组件居中显示。同时,我们还使用了flex布局,将pagination-wrapper容器设置为flex,并使用justify-content属性将分页组件水平居中。