解決修改el-pagination顯示文字的問題
場(chǎng)景
根據(jù)上圖可以看到，element提供了附加功能，通過配置參數(shù)可實(shí)現(xiàn)總條數(shù)、跳轉(zhuǎn)頁面等的功能，但是有些不太友好的是，這些文字是寫死的，不能自己通過插槽去修改，但是目前的需求就是和element提供的文字不一致，比如我只要xxx條，不要共字，那怎么符合當(dāng)前需求呢？
下面來說實(shí)現(xiàn)方法。
修改查看element實(shí)現(xiàn)方式
1、進(jìn)入element-ui下面的packages目錄
2、找到pagination目錄，找到pagination.js文件
根據(jù)代碼可以看到，這里并沒寫死共XXX條，那這個(gè)文字是怎么出來的？
很明顯跟這個(gè)this.t有關(guān)，在文件中搜索，發(fā)現(xiàn)并沒有t的定義，因此肯定就在mixin中，找到該文件。
根據(jù)t返回的值，反推出跟zh-CN這個(gè)文件有關(guān)，查看該文件
找到定義的地方，接下來就好辦了，要進(jìn)行修改只需進(jìn)行替換就行了。
修改實(shí)現(xiàn)
1、在 assets 文件夾中新增 /locale/cn.js 文件
export default {
el: {
table: {
emptyText: '暫無數(shù)據(jù)',
confirmFilter: '篩選',
resetFilter: '重置',
clearFilter: '全部',
sumText: '合計(jì)'
},
pagination: {
goto: '前往',
pagesize: '條/頁',
total: `{total} 條`,
pageClassifier: '頁'
}
}
};
注意：
- 這里要加入table是因?yàn)椋绻桓膒agination，el-table 組件在沒有數(shù)據(jù)時(shí)，「暫無數(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)文章
Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程,使用nginx部署前端項(xiàng)目是一篇非常詳細(xì)的教程,旨在幫助初學(xué)者使用Nginx來部署前端項(xiàng)目,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue3基礎(chǔ)安裝以及配置詳解,需要的朋友可以參考下2023-01-01
Vue.js+express利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳
斷點(diǎn)續(xù)傳就是要從文件已經(jīng)下載的地方開始繼續(xù)下載，本文主要介紹了Vue.js+express利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳，具有一定的參考價(jià)值，感興趣的可以了解下2023-05-05
Pinia簡(jiǎn)單使用以及數(shù)據(jù)持久化詳解
最近正在使用Pinia進(jìn)行狀態(tài)管理,我希望在重新刷新頁面時(shí)保持狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Pinia簡(jiǎn)單使用以及數(shù)據(jù)持久化的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue實(shí)現(xiàn)右側(cè)滑出層動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)右側(cè)滑出層動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
Vue 利用指令實(shí)現(xiàn)禁止反復(fù)發(fā)送請(qǐng)求的兩種方法
這篇文章主要介紹了Vue 利用指令實(shí)現(xiàn)禁止反復(fù)發(fā)送請(qǐng)求的兩種方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
最近接手做一個(gè)前端小項(xiàng)目，基于vue實(shí)現(xiàn)答題功能，具體功能有判斷用戶是否答對(duì)，答對(duì)的話跳到下一題，答錯(cuò)的話彈窗告訴用戶有錯(cuò)題，請(qǐng)重新答題，功能非常人性化，對(duì)實(shí)現(xiàn)代碼感興趣的朋友一起看看吧2021-06-06
vue?目錄樹的展開與關(guān)閉的實(shí)現(xiàn)
Vue作為一款流行的前端框架,提供了一種數(shù)據(jù)驅(qū)動(dòng)的方式來實(shí)現(xiàn)目錄樹,本文主要介紹了vue?目錄樹的展開與關(guān)閉的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
Vue+SpringBoot實(shí)現(xiàn)支付寶沙箱支付的示例代碼
本文主要介紹了Vue+SpringBoot實(shí)現(xiàn)支付寶沙箱支付的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
Vue 多選框所選數(shù)量動(dòng)態(tài)變換Box的高度
在Web開發(fā)中,使用Vue.js框架可以通過ref屬性、v-model指令和計(jì)算屬性等特性實(shí)現(xiàn)元素高度的動(dòng)態(tài)調(diào)整,文章詳細(xì)介紹了如何利用Vue的功能根據(jù)多選框的選擇數(shù)量動(dòng)態(tài)改變?cè)氐母叨?并通過多個(gè)示例展示其應(yīng)用2024-09-09