vue中實現(xiàn)千位分隔符的示例代碼
更新時間：2023年11月09日 14:52:07 作者：君故于時
本文主要介紹了vue中實現(xiàn)千位分隔符的示例代碼,主要兩種方法,一種是某一個字段轉(zhuǎn)換,一種是表格table中的整列字段轉(zhuǎn)換,具有一定的參考價值,感興趣的可以了解一下
vue中實現(xiàn)千位分隔符有兩種，一種是某一個字段轉(zhuǎn)換，一種是表格table中的整列字段轉(zhuǎn)換
比如將3236634.12，經(jīng)過轉(zhuǎn)換后變?yōu)?3,236,634.12
1. 某一個字段轉(zhuǎn)換
寫js方法：
export function numberExchange(value){
if (!value) return 0
// 獲取整數(shù)部分
const intPart = Math.trunc(value)
// 整數(shù)部分處理，增加,
const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
// 預(yù)定義小數(shù)部分
let floatPart = ''
// 將數(shù)值截取為小數(shù)部分和整數(shù)部分
const valueArray = value.toString().split('.')
if (valueArray.length === 2) {
// 有小數(shù)部分
floatPart = valueArray[1].toString() // 取得小數(shù)部分
return intPartFormat + '.' + floatPart
}
return intPartFormat + floatPart
}
直接調(diào)用方法即可：
2. 表格table中的整列字段轉(zhuǎn)換
加入:formatter方法
numberFormat (row, column, cellValue) {
cellValue += ''
if (!cellValue.includes('.')) cellValue += '.'
return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
return $1 + ','
}).replace(/\.$/, '')
},
在el-table-column中調(diào)用該方法：
:formatter=“numberFormat”
效果：
到此這篇關(guān)于vue中實現(xiàn)千位分隔符的示例代碼的文章就介紹到這了,更多相關(guān)vue 千位分隔符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)樓層跳轉(zhuǎn)效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue使用el-upload實現(xiàn)文件上傳的實例代碼
這篇文章主要為大家詳細介紹了vue使用el-upload實現(xiàn)文件上傳,文中示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴們可以參考一下2024-01-01
淺談vue后臺管理系統(tǒng)權(quán)限控制思考與實踐
這篇文章主要介紹了淺談vue后臺管理系統(tǒng)權(quán)限控制思考與實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要給大家介紹了關(guān)于Vue如何啟動項目的相關(guān)資料,還介紹了解決vue啟動項目時間很長問題的相關(guān)方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-02-02
在本篇文章里小編給大家整理的是關(guān)于卸載vue2.0并升級vue_cli3.0的實例內(nèi)容，需要的朋友們可以學(xué)習(xí)參考下。2020-02-02
看了一些 Vue3 的組件庫源碼,發(fā)現(xiàn)無一例外都使用的jsx/tsx來實現(xiàn),而且實現(xiàn)方式也各不相同,下面這篇文章主要給大家介紹了關(guān)于如何在vue3中優(yōu)雅的使用jsx/tsx的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了Vue如何使用第三方庫file-saver和html-docx-js實現(xiàn)導(dǎo)出word文檔的效果,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
vue element 生成無線級左側(cè)菜單的實現(xiàn)代碼
這篇文章主要介紹了vue element 生成無線級左側(cè)菜單的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
Vue+Element UI+Lumen實現(xiàn)通用表格分頁功能
這篇文章主要介紹了Vue+Element UI+Lumen實現(xiàn)通用表格分頁功能，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
vue中{__ob__: observer}對象轉(zhuǎn)化為數(shù)組進行遍歷方式
這篇文章主要介紹了vue中{__ob__: observer}對象轉(zhuǎn)化為數(shù)組進行遍歷方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10