哪个网站可以做ppt赚钱,app开发公司公司,云开发布道师,英文版的wordpress能否改中文版场景需求#xff1a;
Vue2 Element-UI 分页组件el-pagination 修改 自带的total、跳转等默认文字。如下图#xff1a;默认提示字变成了英文#xff0c;如何将其 变成 汉字提示呢#xff1f;
解决方案#xff1a;
1.方案1#xff1a;修改DOM内容 不提倡此方案#xf…场景需求
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 的文字配置的是中文还算英文。
