element-plus组件默认的是英文 改为中文 (Pagination 分页)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element-plus组件默认的是英文 改为中文 (Pagination 分页)相关的知识,希望对你有一定的参考价值。
参考技术A 写一组分页,用的Pagination 分页,默认内容都是英文显示,百度改为中文的方法,大多是element-ui的修改方式,不适用。最后找到一个方法,如下:
想全局可以写在app.vue中,单页引入就写在你需要的页面中
使用element-plus 组件el-pagination的current-change事件
翻页列表没有数据时,使用element-plus 组件el-pagination的current-change事件时,需要注意, 不知道为什么
- 在onMounted中调接口获取数据
onMounted(async()=>{
await methods.init()
});
- 给翻页组件增加事件
<el-pagination
class="margin-20-20"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:pager-count="5"
:page-sizes="[12, 24, 48, 76]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
//@current-change 绑定的事件
handleCurrentChange(val) {
state.currentPage = val
methods.selectData()
},
问题是: 不知道为什么, 调接口请求了两次, 且第二次走的是handleCurrentChange, 当前页没有改变, val是null, 把null赋给currentPage,后台提示不能为null
解决的办法是:
val(即当前的页码)为null 表示没有变化,没有变化时就不去请求
handleCurrentChange(val) {
if(val===null){
return
}
state.currentPage = val
methods.selectData()
},
以上是关于element-plus组件默认的是英文 改为中文 (Pagination 分页)的主要内容,如果未能解决你的问题,请参考以下文章
基于Element-plus封装配置化表单组件(组件的v-model实现)
基于Element-plus封装配置化表单组件(组件的v-model实现)
vue add element-plus 解决menu组件二级菜单失效问题
Vue3 Element-Plus pagination组件基本使用