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

场景需求：

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: "页",
};

修改后效果图:

注意：

重点是在main.js 找到 项目Element 的文字配置的是中文还算英文。