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组件默认英文设置中文
219 0
|
JavaScript
element-plus 按需引入将英文组件修改为中文
element-plus 按需引入将英文组件修改为中文
element-plus 按需引入将英文组件修改为中文
|
8月前
uniapp uni-combox 下拉提示无匹配项(完美解决--附加源码解决方案及思路)
uniapp uni-combox 下拉提示无匹配项(完美解决--附加源码解决方案及思路)
417 0
|
前端开发
前端开发之Element Plus的分页组件el-pagination显示英文转变为中文
前端开发之Element Plus的分页组件el-pagination显示英文转变为中文
106 0
前端开发之Element Plus的分页组件el-pagination显示英文转变为中文
Word文档中标题默认出现首行缩进的修改办法
本文介绍在Word中,标题样式跟随正文样式呈现首行缩进状态的解决办法~
448 1
Word文档中标题默认出现首行缩进的修改办法
移除MagenTo自动发送邮件中网址的多余部分?___store=id
移除MagenTo自动发送邮件中网址的多余部分?___store=id
|
JavaScript 测试技术
Easyui 修改jquery validatebox为英文校验提示为中文提示
Easyui 修改jquery validatebox为英文校验提示为中文提示
133 0
|
JavaScript
VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入
输入超过规定长度error提醒,并实时显示输入长度,可无限输入
1073 0
VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入
antd日期组件配置了中文后还是显示英文的解决过程
antd日期组件配置了中文后还是显示英文的解决过程
957 0
antd日期组件配置了中文后还是显示英文的解决过程
|
PHP
【技术分享】select下拉框option默认选中(php模板渲染)
【技术分享】select下拉框option默认选中(php模板渲染)
192 0