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>

最终效果


相关文章
Datatables获取选中行的某一列的数据
Datatables获取选中行的某一列的数据
716 1
elementUI使用Pagination分页组件增加自定义slot
本文介绍了如何在Element UI的Pagination分页组件中使用自定义slot。通过在`el-pagination`标签内的适当位置添加slot内容,可以在分页组件中插入自定义的HTML或组件。文章提供了一个示例代码,展示了如何添加两个自定义slot,并展示了最终效果。
1742 4
elementUI使用Pagination分页组件增加自定义slot
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10086 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
Vue2表格(Table)
这是一个基于 Vue3 的表格组件,提供了灵活的数据展示与分页功能。主要接收表格列配置 `columns`、数据源 `dataSource`、分页器配置 `pagination` 等参数,并支持加载状态显示及单页隐藏分页器等特性。组件内置了加载中组件 `Spin` 和分页组件 `Pagination`,样式参考 ant-design。使用时需在目标页面引入组件并设置相关属性即可实现丰富的表格展示效果。
771 1
Vue2表格(Table)
ElementPlus菜单如何默认打开第一个,router-view里替换变的,menu菜单没有跳转怎么办,开启路由:router=“true“,如何设置点击空格就调用方法
ElementPlus菜单如何默认打开第一个,router-view里替换变的,menu菜单没有跳转怎么办,开启路由:router=“true“,如何设置点击空格就调用方法
ElementPlus菜单如何默认打开第一个,router-view里替换变的,menu菜单没有跳转怎么办,开启路由:router=“true“,如何设置点击空格就调用方法
Echarts各类图表常用配置项说明,附示例代码
Echarts各类图表常用配置项说明,附示例代码
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
|
前端开发
前端开发之Element Plus的分页组件el-pagination显示英文转变为中文
前端开发之Element Plus的分页组件el-pagination显示英文转变为中文
1120 0
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
2395 0
【亲测有效】Element UI 自定义 Notification 通知样式不生效,设置this.$notify样式不生效问题
【亲测有效】Element UI 自定义 Notification 通知样式不生效,设置this.$notify样式不生效问题
772 0