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