首先我们需要在main.js中导入相应的包,代码如下
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
// 引入路由对象实例
import router from './router/index.js'
import './font-awesome-4.7.0/css/font-awesome.min.css'
import 'element-plus/dist/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn' //引入element-plus中文包
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(locale)
app.mount('#app')
然后再使用分页插件的组件的js代码中添加
//中文包
import zhCn from "element-plus/lib/locale/lang/zh-cn"
let locale = zhCn
最后在操作如下
<!--分页查询-->
<div style="margin-top: 20px">
<el-config-provider :locale="locale"> <!--切换语言包为中文包-->
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[100, 200, 300, 400]"
:small="true"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-config-provider>
</div>
el-config-provider(切换系统语言)被用来提供全局的配置选项,让配置能够在全局都能够被访问到,它的属性有locale,其是用来切换语言包的