需求
在实习项目中有需求需要自定义分页器中文字,查看element-plus官网没有查到对应的属性,所以记录一下如何修改。
直接看效果图
(官网初始版)
(修改后)
方法
直接看代码先
<el-config-provider :locale="$commonLang('customPagination')">
<el-pagination
:page-sizes="[10, 20, 50, 100]"
v-model:currentPage="paginationObj.curPage"
v-model:page-size="paginationObj.pageSize"
:disabled="false"
:background="true"
:layout="'total, sizes, ->, prev, pager, next, jumper'"
:total="paginationObj.totalLen"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-config-provider>
官网解释:el-config-provider 被用来提供全局的配置选项,让你的配置能够在全局都能够被访问到。locale 属性对应翻译文本,因为我要做国际化,所以直接在项目的自己国际化文件写下你想修改的文字(注意:对象键名不能改变)
// zh-tw
customPagination: {
el: {
pagination: {
pagesize: '條/頁',
total: '共 {total} 條',
goto: '前往',
pageClassifier: '頁'
}
}
}
// zh-cn
customPagination: {
el: {
pagination: {
pagesize: '条/页',
total: '共 {total} 条',
goto: '前往',
pageClassifier: '页'
}
}
}