解决修改el-pagination显示文字的问题
更新时间：2024年07月26日 17:06:27 作者：h&jjj
这篇文章主要介绍了解决修改el-pagination显示文字的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
场景
根据上图可以看到，element提供了附加功能，通过配置参数可实现总条数、跳转页面等的功能，但是有些不太友好的是，这些文字是写死的，不能自己通过插槽去修改，但是目前的需求就是和element提供的文字不一致，比如我只要xxx条，不要共字，那怎么符合当前需求呢？
下面来说实现方法。
修改查看element实现方式
1、进入element-ui下面的packages目录
2、找到pagination目录，找到pagination.js文件
根据代码可以看到，这里并没写死共XXX条，那这个文字是怎么出来的？
很明显跟这个this.t有关，在文件中搜索，发现并没有t的定义，因此肯定就在mixin中，找到该文件。
根据t返回的值，反推出跟zh-CN这个文件有关，查看该文件
找到定义的地方，接下来就好办了，要进行修改只需进行替换就行了。
修改实现
1、在 assets 文件夹中新增 /locale/cn.js 文件
export default {
el: {
table: {
emptyText: '暂无数据',
confirmFilter: '筛选',
resetFilter: '重置',
clearFilter: '全部',
sumText: '合计'
},
pagination: {
goto: '前往',
pagesize: '条/页',
total: `{total} 条`,
pageClassifier: '页'
}
}
};
注意：
- 这里要加入table是因为，如果只改pagination，el-table 组件在没有数据时，「暂无数据」这样的默认提示文字消失了。
- 所以我们还需要把 el-table 这部分缺失文字覆盖补全
2、在main.js 中引入使用。
...
import Element from 'element-ui';
import './styles/element-variables.scss'; // 覆盖一些element-ui样式风格
import zhLang from 'element-ui/lib/locale/lang/zh-CN'; // 引入官方的中文国际化
import locale from './assets/locale/cn'; // 引入自己的
Vue.use(Element, {
locale: { ...zhLang, ...locale }, // 使用本地的 locale 去覆盖官方的 zhLang
});
...
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue2如何利用echarts绘制折线图,饼图和大图，文中的示例代码简洁易懂，具有一定的借鉴价值，需要的可以参考一下2023-04-04
解决vue报错Syntax Error:TypeError:this.getOptions is&n
在未安装less 和 less-loader 的情况下,编写了 less 模块代码,通过 npm 同时安装了两者,遇到错误后,将问题归因于 less-loader 版本过高,解决了问题,分享经验,希望可以帮助到遇到同样问题的开发者2026-04-04
解决vue项目中type=”file“ change事件只执行一次的问题
这篇文章主要介绍了vue项目中解决type=”file“ change事件只执行一次的问题,本文给大家介绍的非常详细，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了详解Vue前端生产环境发布配置实战篇，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要为大家详细介绍了Vue2.x通用条件搜索组件的封装及应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了Vue基本指令实例图文讲解，文章将基本指令讲解的很清楚，有对于指令不太懂的同学可以跟着学习研究下2021-02-02
本文主要介绍了vite结合electron构建前端桌面应用程序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要为大家详细介绍了Vue2如何集成Lodop插件实现在线打印功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-03-03
今天小编就为大家分享一篇解决vue-cli项目打包出现空白页和路径错误的问题。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
使用Webpack提升Vue.js应用程序的4种方法（翻译）
这篇文章主要介绍了使用Webpack提升Vue.js应用程序的4种方法（翻译），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
最新评论