首页 > 其他分享 >使用element-plus的el-pagination分页组件的时候怎么换中文?

使用element-plus的el-pagination分页组件的时候怎么换中文?

时间:2023-06-28 17:35:00浏览次数:42  
标签:el pagination locale app use element plus import

element里面的分页是英文版的,但是项目需求是要中文的,可以用el-config-provider(切换系统语言)全局的配置选项,有locale属性,用来切换语言包

做法如下:

在main.js引入对应的包,代码如下:

 1 import 'normalize.css/normalize.css'
 2 import ElementPlus from 'element-plus'
 3 import 'element-plus/dist/index.css'
 4 import '@/assets/style/public.less'
 5 //引入element-plus中文包
 6 import locale from 'element-plus/lib/locale/lang/zh-cn' 
 7 import { createApp } from 'vue'
 8 import { createPinia } from 'pinia'
 9 import App from './App.vue'
10 import router from './router'
11 
12 const app = createApp(App)
13 app.use(ElementPlus)
14 app.use(locale)
15 app.use(createPinia())
16 app.use(router)
17 app.mount('#app')

在用到分页的页面:

 1 //中文包
 2 import zhCn from "element-plus/lib/locale/lang/zh-cn";
 3 
 4 let locale = zhCn;
 5
 6 
 7 <!--分页查询-->
 8 <div class="demo-pagination-block">
 9     <el-config-provider :locale="locale">
10       <!--切换语言包为中文包-->
11          <el-pagination
12             v-model:current-page="currentPage"
13             v-model:page-size="pageSize"
14             :page-sizes="[100, 200, 300, 400]"
15             :small="true"
16             layout="total, sizes, prev, pager, next, jumper"
17             :total="400"
18             @size-change="handleSizeChange"
19             @current-change="handleCurrentChange"
20           />
21      </el-config-provider>
22 </div>

 

标签:el,pagination,locale,app,use,element,plus,import
From: https://www.cnblogs.com/NUNA/p/17512045.html

相关文章

  • 在element-ui视频上传使用canvas截取视频帧数,并且转为视频封面。
    <el-upload:http-request="getFile"//自定义上传action:on-change="handleFileChange"//监听文件上传ref="upload"accept="video/*"//定义格式为视频><el-butto......
  • DreamBooth Fine Tuning Text-to-Image Diffusion Models for Subject-Driven Generat
    目录概MotivationDreamBooth代码RuizN.,LiY.,JampaniV.,PritchY.,RubinsteinM.andAbermanK.DreamBooth:Finetuningtext-to-imagediffusionmodelsforsubject-drivengeneration.arXivpreprintarXiv:2208.12242,2022.概可控文生图.Motivation之前的......
  • 1. 使用 IntelliJ IDEA 开发 Azure Function APP (Java)
    1.1前提Azure账户并有可食用的订阅。创建免费的Azure账户。Azure支持的JavaDevelopmentKit(JDK),JDK8或JDK11。IntelliJIDEA无限制版本或社区版本均可。Maven3.5+最新的FunctionCoreTools1.2安装插件并登录在IntelliJIDEA中安装AzureToolkit插......
  • vue-element table表格排序推拽功能
    //1.安装sortablejsnpminstallsortablejs--save//2.功能页面中引入importSortablefrom‘sortablejs’具体使用(注意:elementtable务必指定row-key,且row-key必须是唯一的,如id,不然会出现排序不对的情况)<el-tablerow-key="id":data="tableData"style="width:......
  • element-ui 去除input的框
    ::v-deep{.el-input__inner{border:0;border-radius:0px;//&:focus{//border-bottom:1pxsolid#409eff;//}}.el-textarea__inner{resize:none;/*这个是去掉textarea下面拉伸的那个标志,如下......
  • Elasticsearch的数据备份与恢复
    1、序言Elasticsearch默认配置是数据持久化的,就是ES会定时地把缓存数据刷新到硬盘,从而达到数据持久化地效果。在生产环境中,ES的数据持久化是必须的,防止出现断电时数据的丢失。固然,除了数据持久化外,咱们也是得作到数据备份的,防止出现数据损坏时没法恢复数据的状况。下面开始介绍ES......
  • IntelliJ IDEA 常用配置
     1.CTRL+滑动滚轮调整窗口显示大小File->Settings->Editor->General->Changefontsize withCtrl+Mousewheel 2.代码编辑区显示行号Settings->Editor->General->Appearance 勾选 ShowLineNumbers ......
  • 3、Apache Kudu集成impala(shell和java操作)的详细操作
    ApacheKudu系列文章1、ApacheKudu介绍及架构、工作原理、两种部署方式、使用限制详解2、ApacheKudu-javaapi操作kudu详细示例以及kudu的三种实现示例3、ApacheKudu集成impala(shell和java操作)的详细操作(文章目录)本文简单的介绍了通过impala操作kudu,包括通过shell和......
  • 数据库 - 不同数据库将表、字段、描述保存到Excel
    不同数据库将表、字段、描述保存到Excel查询语句SqlServerSELECT表名=CASEWHENA.COLORDER=1THEND.NAMEELSE''END,表备注=CASEWHENA.COLORDER=1THENISNULL(F.VALUE,'')ELSE''END,列序号=A.COLORDER,列名称=A.NAME,标识=CASEWHENCOLUMNPROPERT......
  • 使用 IntelliJ IDEA 开发 Azure Function APP (Java)
    使用IntelellJIDEA开发AzureFunctionAPP(Java)前提Azure账户并有可食用的订阅。创建免费的Azure账户。Azure支持的JavaDevelopmentKit(JDK),JDK8或JDK11。IntelliJIDEA无限制版本或社区版本均可。Maven3.5+最新的FunctionCoreTools安装插件并登......