ElementPlus中total出现el.pagination.total,显示总数没有出现怎样解决,出现的是英文,不是中文如何解决,这里如何配置中文,配置中文

简介: ElementPlus中total出现el.pagination.total,显示总数没有出现怎样解决,出现的是英文,不是中文如何解决,这里如何配置中文,配置中文

今天敲代码的时候,遇到了ElementPlus分页显示不全的情况,这里该如何解决:这里还显示了el.pagination.total

解决的方法是:ElementPlus需要配置中文,参考资料:

vue3+elementplus 前端分页原理及实现_哔哩哔哩_bilibili

这里main.js需要配置中文版本

这几个位置需要注意

这里user后面要填上中文配置:

附赠一下main.js源码:

import { createApp } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import App from './App.vue'
import router from '@/router'
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-persistedstate-plugin'
import ElementPlus from 'element-plus'
import locale from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/theme-chalk/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons'
import axios from "axios";
// Vue.prototype.$http=axios;
// axios.defaults.baseURL="http://localhost:9090"
// import editor from '@/views/editorViewDemo.vue'
// main.ts
 
import 'element-plus/dist/index.css'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.config.globalProperties.$http =axios;
axios.defaults.baseURL="http://localhost:9090";
const pinia = createPinia();
const persist = createPersistedState();
pinia.use(persist)
app.use(pinia)
 
app.use(ElementPlus)
 
app.mount('#app')
 
 
 
 
 
// app.component('editorView', editor)
 
// app.component('QuillEditor', editor)
// 这个地方可能出问题
createApp(App).component('QuillEditor', QuillEditor).use(router).use(scroll).use(ElementPlus, { locale }).mount('#app')
 
Object.keys(ElementPlusIconsVue).forEach(key => {
    app.component(key, ElementPlusIconsVue[key])
})

表单源码:

<template>
  <div class="block">
    <span class="demonstration">显示总数</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:currentPage="currentPage1"
      :page-size="100"
      layout="total, prev, pager, next"
      :total="1000"
    >
    </el-pagination>
  </div>
    </template>
 
<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
      },
    },
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
      }
    },
  }
</script>
 
<style>
 
</style>

最终效果


相关文章
element-plus组件默认英文设置中文
element-plus组件默认英文设置中文
195 0
Word转PDF 并转成base64(亲测可用)
Word转PDF 并转成base64(亲测可用)
395 0
|
JavaScript
element-plus 按需引入将英文组件修改为中文
element-plus 按需引入将英文组件修改为中文
element-plus 按需引入将英文组件修改为中文
|
5月前
|
测试技术
【LaTex】10 从md文件导入\导出word (因为:Typora-版本过高不能转换word 报错:Unknown option --atx-headers. )
【LaTex】10 从md文件导入\导出word (因为:Typora-版本过高不能转换word 报错:Unknown option --atx-headers. )
143 7
|
11月前
|
前端开发
前端开发之Element Plus的分页组件el-pagination显示英文转变为中文
前端开发之Element Plus的分页组件el-pagination显示英文转变为中文
57 0
前端开发之Element Plus的分页组件el-pagination显示英文转变为中文
|
11月前
|
数据可视化
新建论文三线表模板,一键格式刷(包含word和latex版本)
新建论文三线表模板,一键格式刷(包含word和latex版本)
578 0
|
JavaScript
js金额补充--2位小数0demo效果(整理)
js金额补充--2位小数0demo效果(整理)
Word文档中标题默认出现首行缩进的修改办法
本文介绍在Word中,标题样式跟随正文样式呈现首行缩进状态的解决办法~
371 1
Word文档中标题默认出现首行缩进的修改办法
|
前端开发
#yyds干货盘点 【React工作记录十一】控制ant design中form的必填项判断
#yyds干货盘点 【React工作记录十一】控制ant design中form的必填项判断
166 0
|
前端开发
#yyds干货盘点 【React工作记录十一】控制ant design中form的必填项判断
#yyds干货盘点 【React工作记录十一】控制ant design中form的必填项判断
166 0