Element-Plus-(三)Element-Plus实现分页显示中文

本文最后更新于:March 3, 2022 pm

Element Plus 基于 Vue 3,面向设计师和开发者的组件库。Element Plus,由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库,提供了配套设计资源,帮助网站快速成型。

目录

因为 Element-Plus 组件内部默认使用英语,如果需要其他语言这需要进行多语言设置。

注册组件

引入 el-config-provider,如果你是把整个 Element-Plus 引入的,则不管(反正我是)。

引入中文

在分页的 vue 文件中导入:

1
import zhCn from 'element-plus/lib/locale/lang/zh-cn'

在 Data 中定义:

1
2
3
4
5
data() {
return {
locale:zhCn
}
}

使用

1
2
3
4
5
6
7
8
9
10
11
12
<el-config-provider :locale="locale">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 15, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-config-provider>