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组件默认英文设置中文
206 0
|
JavaScript
element-plus 按需引入将英文组件修改为中文
element-plus 按需引入将英文组件修改为中文
element-plus 按需引入将英文组件修改为中文
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
859 0
|
1月前
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
291 1
|
4月前
el-select 支持拼音搜索(含插件 pinyin-match 的使用)
el-select 支持拼音搜索(含插件 pinyin-match 的使用)
144 0
|
前端开发
前端开发之Element Plus的分页组件el-pagination显示英文转变为中文
前端开发之Element Plus的分页组件el-pagination显示英文转变为中文
94 0
前端开发之Element Plus的分页组件el-pagination显示英文转变为中文
Word文档中标题默认出现首行缩进的修改办法
本文介绍在Word中,标题样式跟随正文样式呈现首行缩进状态的解决办法~
417 1
Word文档中标题默认出现首行缩进的修改办法
移除MagenTo自动发送邮件中网址的多余部分?___store=id
移除MagenTo自动发送邮件中网址的多余部分?___store=id
|
前端开发
#yyds干货盘点 【React工作记录十一】控制ant design中form的必填项判断
#yyds干货盘点 【React工作记录十一】控制ant design中form的必填项判断
170 0
|
前端开发
#yyds干货盘点 【React工作记录十一】控制ant design中form的必填项判断
#yyds干货盘点 【React工作记录十一】控制ant design中form的必填项判断
176 0