解决修改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
});
...
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Ubuntu22.04使用nginx部署vue前端项目的详细教程
这篇文章主要给大家介绍了关于Ubuntu22.04使用nginx部署vue前端项目的详细教程,使用nginx部署前端项目是一篇非常详细的教程,旨在帮助初学者使用Nginx来部署前端项目,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Vue3基础安装以及配置详解,需要的朋友可以参考下2023-01-01
断点续传就是要从文件已经下载的地方开始继续下载，本文主要介绍了Vue.js+express利用切片实现大文件断点续传，具有一定的参考价值，感兴趣的可以了解下2023-05-05
最近正在使用Pinia进行状态管理,我希望在重新刷新页面时保持状态,下面这篇文章主要给大家介绍了关于Pinia简单使用以及数据持久化的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要为大家详细介绍了vue实现右侧滑出层动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了Vue 利用指令实现禁止反复发送请求的两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
最近接手做一个前端小项目，基于vue实现答题功能，具体功能有判断用户是否答对，答对的话跳到下一题，答错的话弹窗告诉用户有错题，请重新答题，功能非常人性化，对实现代码感兴趣的朋友一起看看吧2021-06-06
Vue作为一款流行的前端框架,提供了一种数据驱动的方式来实现目录树,本文主要介绍了vue 目录树的展开与关闭的实现,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
本文主要介绍了Vue+SpringBoot实现支付宝沙箱支付的示例代码，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
在Web开发中,使用Vue.js框架可以通过ref属性、v-model指令和计算属性等特性实现元素高度的动态调整,文章详细介绍了如何利用Vue的功能根据多选框的选择数量动态改变元素的高度,并通过多个示例展示其应用2024-09-09
最新评论