当前位置：首页 > news >正文

Vue2 Element-UI 分页组件el-pagination 修改自带的total、跳转等默认文字

news 2025/7/19 21:47:14

场景需求：

Vue2 Element-UI 分页组件el-pagination 修改自带的total、跳转等默认文字。如下图：默认提示字变成了英文，如何将其变成汉字提示呢？
在这里插入图片描述

解决方案：

1.方案1：修改DOM内容

不提倡此方案，因为部分内容修改繁琐，不易完全解决需求。

具体代码：

//在用到 分页组件的页面mounted 钩子函数中添加如下代码。mounted() {const pagination__total = document.querySelector(".el-pagination__total");pagination__total.innerText = `总共 ${this.total} 组数据`; // 这里的this.total 是 你存放数据总数的变量},

修改前效果：
在这里插入图片描述
修改后效果：

上述总数total 提示发生了变化；原理是使用 innerText 方法改变了DOM内容；

如果要修改 Go to 页面那块这个方法就不太适用，因为如下图所示，Go to 页面的DOM 里面包含的内容不只是文字和变量，还有一个 input 组件。
在这里插入图片描述

意思是如果也通过这个方法修改DOM，把‘Go to’修改为目标文字后，还需要将其他子元素原样添加进去，否则就会出现目标文字将内容全部替换，导致内容确实。

  mounted() {const pagination__total = document.querySelector(".el-pagination__total");pagination__total.innerText = `总共 ${400} 组数据`;const el_pagination__jump = document.querySelector(".el-pagination__jump");el_pagination__jump.innerText = `跳转至`;  // 跳转至会把内容全部替换 ，所以此外需要 添加 el_pagination__jump 元素内 其他 DOM 内容},

修改后效果：
在这里插入图片描述
修改后，输入框没有了，就需要在修改的时候添加上对应输入框的DOM

所以不太推荐这个方法

2.方案2：修改配置

出现英文提示的情况，首先我们要先去项目文件找到mian.js 查看一下代码

import Vue from "vue";// import locale from "element-ui/lib/locale/lang/zh-CN"; // lang i18n  中文主题
import locale from "element-ui/lib/locale/lang/en"; // 英文主题Vue.use(ElementUI, { locale });

根据这个设置查看使用的是英文还算中文，如果使用的是en 不是 zh-CN ,将引用变成zh-CN 就可以了。

zh-CN.js / en.js 配置文件
在这里插入图片描述

修改后效果图：

当然上面属于是默认配置文字，如果想修改也可以通过配置修改，具体代码如下：

//main.js 文件中import locale from "element-ui/lib/locale/lang/zh-CN"; // lang i18n
// import locale from "element-ui/lib/locale/lang/en";
locale.el.pagination = {pagesize: "条/页",total: `共 {total} 条`,goto: "我要去第",pageClassifier: "页",
};