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>

最终效果


相关文章
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10849 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
elementUI使用Pagination分页组件增加自定义slot
本文介绍了如何在Element UI的Pagination分页组件中使用自定义slot。通过在`el-pagination`标签内的适当位置添加slot内容,可以在分页组件中插入自定义的HTML或组件。文章提供了一个示例代码,展示了如何添加两个自定义slot,并展示了最终效果。
2382 4
elementUI使用Pagination分页组件增加自定义slot
|
安全 Java 数据库
ifPresent()`方法的用途、使用场景
ifPresent()`方法的用途、使用场景
1642 4
|
前端开发 虚拟化
简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得
这篇文章分享了作者使用ElementPlus的虚拟化树形控件`el-tree-v2`的心得,展示了其基本用法和如何通过自定义模板来增强树节点的交互性。
5076 1
简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
ElementPlus菜单如何默认打开第一个,router-view里替换变的,menu菜单没有跳转怎么办,开启路由:router=“true“,如何设置点击空格就调用方法
ElementPlus菜单如何默认打开第一个,router-view里替换变的,menu菜单没有跳转怎么办,开启路由:router=“true“,如何设置点击空格就调用方法
ElementPlus菜单如何默认打开第一个,router-view里替换变的,menu菜单没有跳转怎么办,开启路由:router=“true“,如何设置点击空格就调用方法
【node】图片验证码(svg-captcha)
【node】图片验证码(svg-captcha)
840 0
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)