首页 > 其他分享 >Element-plus中使用pagination显示sizes为中文

Element-plus中使用pagination显示sizes为中文

时间:2023-05-13 13:22:41浏览次数:45  
标签:pagination sizes locale 中文 Element plus

需求描述

使用分页组件中添加sizes信息,也就是一个下拉框,用户可以选择当前页的数据量

<el-pagination background v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
      :page-sizes="[5, 10, 15, 20, 25]" @current-change="handleCurrentChange" @size-change="handleSizeChange"
      layout="sizes, prev, pager, next" :hide-on-single-page="false" />

但是在显示时却是英文 也就是这样的
image
后来查询发现,element-plus默认就是英文的,需要我们将其改成中文的即可

解决方案

再App.vue中引入local

<template>
  <div id="app">
    <el-config-provider :locale="locale">
      <router-view />
    </el-config-provider>
  </div>
</template>

<script lang="ts" setup>
import locale from "element-plus/lib/locale/lang/zh-cn"
</script>

之后就变成中文的
image

标签:pagination,sizes,locale,中文,Element,plus
From: https://www.cnblogs.com/zx529/p/17397205.html

相关文章

  • Vue内 ElementUI 动态表头渲染顺序错乱问题
    column渲染顺序不正确数据如下:['增加','描述','修改时间']错误显示:原因自定义:同一层级下条件渲染复数个<el-table-column>标签导致的正确做法在一个<el-table-column>标签内通过<template>条件渲染度娘上的一些其他做法添加一个宽度为1的列<el-table-columnwidth......
  • web自动化12-捕获异常NoSuchElementException
    在定位元素的时候,经常会遇到各种异常,遇到异常又该如何处理呢?selenium的exceptions模块,了解异常发生的原因。捕获异常1.出现异常代码会被结束中断,为了可以继续运行,可以用try...except...来捕获异常。捕获后可以输出异常原因,以便于分析异常原因2.从上面的截图看报错提示元素不......
  • vue 关于element el-dialog使用心得-传参问题
    最近写一个功能用到了弹窗,在弹窗内显示一个子组件。关于el-dialog的el-dialog:visible.sync="xxx  参考https://blog.csdn.net/startyangu/article/details/128029464?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%......
  • vue-element-admin安装依赖报错问题
    前言vue-element-admin中文官网要使用中文版,直接去gitgithub下载包:https://github.com/PanJiaChen/vue-element-admin/tree/i18ngitee下载包:https://gitee.com/panjiachen/vue-element-admin/tree/i18n分支记得选择这个i18n问题解决1.修改package.json文件tui-editor这......
  • elementsUI和windicss一起用
    npminstallelement-pluswindicss--saveimport{createApp}from'vue'importAppfrom'./App.vue'importElementPlusfrom'element-plus'import'element-plus/lib/theme-chalk/index.css'importWindiCSSfrom......
  • Vue3 + Vite4.3 + Element-Plus + TypeScript 从0到1搭建企业级后台管理系统(前后端开
    vue3-element-admin是基于vue-element-admin升级的Vue3+ElementPlus版本的后台管理前端解决方案,技术栈为Vue3+Vite4+TypeScript+ElementPlus+Pinia+VueRouter等当前主流框架。相较于其他管理前端框架,vue3-element-admin的优势在于一有一无有配套后端、无......
  • element ui的el-upload上传组件中使用el-image的图片预览
    问题想在elementui的el-upload上传组件中使用el-image的图片预览,这样就可以放大和缩小还有多张图片切换因为el-upload提供的是使用对话框查看图片,不能放大缩小还不能左右切换说明在el-image组件内的预览功能是使用的el-image-viewer这个小组件实现的,所以我们直接导入调用这......
  • 用vue+elementui写了一个图书管理系统
    用vue+elementui写了一个图书管理系统转载自公号:java大师目前是指一个纯前端的展示,后端还在开发中,前端接口是通过json-server模拟的用到的技术栈1、vue.js2、elementui3、json-server4、axios5、vue-router动态路由目录结构1、components文件夹是封装的通用的Mytabl......
  • 使用vue2+element-ui+vuex实现后台管理系统的头部背景色动态点击修改
    **以下内容仅供自己学习使用话不多说,直接上代码1.首先去vuex里面importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);conststore=newVuex.Store({state:{headerColor:'default-header',//定义一个默认的颜色},mutations:{ //setHe......
  • 开源单用户客服系统源码-上传附件功能-elementui 异步上传文件【唯一客服开发商】
    之前开源的单用户客服系统,上传附件成功后,还不能展示出文件形式,今天把上传展示出文件形式给开发完善一下。我想要实现的效果是,展示出文件的名称和大小信息后端返回一个带有文件信息的json结果,前端把该信息组织一下并解析成可以展示的样子后端golang部分代码funcUploadFile(c......