解决修改el-pagination显示文字的问题
作者：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
});
...
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。