解決修改el-pagination顯示文字的問(wèn)題
場(chǎng)景
根據(jù)上圖可以看到，element提供了附加功能，通過(guò)配置參數(shù)可實(shí)現(xiàn)總條數(shù)、跳轉(zhuǎn)頁(yè)面等的功能，但是有些不太友好的是，這些文字是寫死的，不能自己通過(guò)插槽去修改，但是目前的需求就是和element提供的文字不一致，比如我只要xxx條，不要共字，那怎么符合當(dāng)前需求呢？
下面來(lái)說(shuō)實(shí)現(xiàn)方法。
修改查看element實(shí)現(xiàn)方式
1、進(jìn)入element-ui下面的packages目錄
2、找到pagination目錄，找到pagination.js文件
根據(jù)代碼可以看到，這里并沒(méi)寫死共XXX條，那這個(gè)文字是怎么出來(lái)的？
很明顯跟這個(gè)this.t有關(guān)，在文件中搜索，發(fā)現(xiàn)并沒(méi)有t的定義，因此肯定就在mixin中，找到該文件。
根據(jù)t返回的值，反推出跟zh-CN這個(gè)文件有關(guān)，查看該文件
找到定義的地方，接下來(lái)就好辦了，要進(jìn)行修改只需進(jìn)行替換就行了。
修改實(shí)現(xiàn)
1、在 assets 文件夾中新增 /locale/cn.js 文件
export default {
el: {
table: {
emptyText: '暫無(wú)數(shù)據(jù)',
confirmFilter: '篩選',
resetFilter: '重置',
clearFilter: '全部',
sumText: '合計(jì)'
},
pagination: {
goto: '前往',
pagesize: '條/頁(yè)',
total: `{total} 條`,
pageClassifier: '頁(yè)'
}
}
};
注意：
- 這里要加入table是因?yàn)椋绻桓膒agination，el-table 組件在沒(méi)有數(shù)據(jù)時(shí)，「暫無(wú)數(shù)據(jù)」這樣的默認(rèn)提示文字消失了。
- 所以我們還需要把 el-table 這部分缺失文字覆蓋補(bǔ)全
2、在main.js 中引入使用。
...
import Element from 'element-ui';
import './styles/element-variables.scss'; // 覆蓋一些element-ui樣式風(fēng)格
import zhLang from 'element-ui/lib/locale/lang/zh-CN'; // 引入官方的中文國(guó)際化
import locale from './assets/locale/cn'; // 引入自己的
Vue.use(Element, {
locale: { ...zhLang, ...locale }, // 使用本地的 locale 去覆蓋官方的 zhLang
});
...
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue2如何利用echarts繪制折線圖,餅圖和大圖，文中的示例代碼簡(jiǎn)潔易懂，具有一定的借鑒價(jià)值，需要的可以參考一下2023-04-04
解決vue報(bào)錯(cuò)Syntax Error:TypeError:this.getOptions is&n
在未安裝less 和 less-loader 的情況下,編寫了 less 模塊代碼,通過(guò) npm 同時(shí)安裝了兩者,遇到錯(cuò)誤后,將問(wèn)題歸因于 less-loader 版本過(guò)高,解決了問(wèn)題,分享經(jīng)驗(yàn),希望可以幫助到遇到同樣問(wèn)題的開(kāi)發(fā)者2026-04-04
解決vue項(xiàng)目中type=”file“ change事件只執(zhí)行一次的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中解決type=”file“ change事件只執(zhí)行一次的問(wèn)題,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
詳解Vue前端生產(chǎn)環(huán)境發(fā)布配置實(shí)戰(zhàn)篇
這篇文章主要介紹了詳解Vue前端生產(chǎn)環(huán)境發(fā)布配置實(shí)戰(zhàn)篇，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了Vue2.x通用條件搜索組件的封裝及應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了Vue基本指令實(shí)例圖文講解，文章將基本指令講解的很清楚，有對(duì)于指令不太懂的同學(xué)可以跟著學(xué)習(xí)研究下2021-02-02
vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序
本文主要介紹了vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue2集成Lodop插件實(shí)現(xiàn)在線打印功能
這篇文章主要為大家詳細(xì)介紹了Vue2如何集成Lodop插件實(shí)現(xiàn)在線打印功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
解決vue-cli項(xiàng)目打包出現(xiàn)空白頁(yè)和路徑錯(cuò)誤的問(wèn)題
今天小編就為大家分享一篇解決vue-cli項(xiàng)目打包出現(xiàn)空白頁(yè)和路徑錯(cuò)誤的問(wèn)題。具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
使用Webpack提升Vue.js應(yīng)用程序的4種方法（翻譯）
這篇文章主要介紹了使用Webpack提升Vue.js應(yīng)用程序的4種方法（翻譯），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10