elementUI分页修改字 条/页
时间: 2024-10-18 10:08:23 浏览: 16
Element UI 的分页组件(Pagination)默认显示的是每页的 "条数" 和总共有多少 "页",如果你想更改它显示的文字,比如将 "条/页" 改成 "项/页" 或者其他的自定义文本,你可以通过覆盖组件的 `props` 中的 `pageSizes` 和 `total` 属性的标签文字。
首先,你需要找到 Pagination 组件实例,并获取到它的 `pageSizeOptions` 和 `current`、`total` 等属性。然后,你可以创建一个新的数组来定义新的页面大小选项,并设置相应的标签:
```html
<template>
<el-pagination
:current="currentPage"
:page-size="customPageSize"
:page-sizes="[5, 10, 20, 50]"
:page-size-options="customPageSizesLabel"
:total="totalItems"
@current-change="handleCurrentChange"
></el-pagination>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
totalItems: yourTotalItemCount, // 替换为你实际的总数
customPageSizes: [5, 10, 20, 50], // 自定义页面大小
customPageSizesLabel: ['5项', '10项', '20项', '50项'], // 显示的文字
};
},
methods: {
handleCurrentChange(page) {
this.currentPage = page;
}
}
};
</script>
```
在这个例子中,`yourTotalItemCount` 需要替换为你实际的数据。当你需要改变显示的文本时,只需更新 `customPageSizesLabel` 数组即可。
阅读全文