快捷導(dǎo)航

vue中實(shí)現(xiàn)千位分隔符的示例代碼

更新時(shí)間：2023年11月09日 14:52:07 作者：君故于時(shí)

本文主要介紹了vue中實(shí)現(xiàn)千位分隔符的示例代碼,主要兩種方法,一種是某一個(gè)字段轉(zhuǎn)換,一種是表格table中的整列字段轉(zhuǎn)換,具有一定的參考價(jià)值,感興趣的可以了解一下

1. 某一個(gè)字段轉(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中實(shí)現(xiàn)千位分隔符的示例代碼的文章就介紹到這了,更多相關(guān)vue 千位分隔符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3中同時(shí)定義多個(gè)插槽的實(shí)現(xiàn)示例
本文主要介紹了Vue3中同時(shí)定義多個(gè)插槽的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
vue3不能使用history.pushState修改url參數(shù)踩坑
這篇文章主要為大家介紹了vue3不能使用history.pushState修改url參數(shù)踩坑解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
前端vue3使用axios調(diào)用后端接口的實(shí)現(xiàn)方法
vue本身不支持ajax接口的請求,所以在vue中經(jīng)常使用axios這個(gè)接口請求工具,下面這篇文章主要給大家介紹了關(guān)于前端vue3使用axios調(diào)用后端接口的實(shí)現(xiàn)方法,需要的朋友可以參考下
2022-12-12
詳解關(guān)于vue-area-linkage走過的坑
這篇文章主要介紹了詳解關(guān)于vue-area-linkage走過的坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號最后不加
這篇文章主要為大家介紹了vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號最后不加逗號示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
vue2.0之多頁面的開發(fā)的示例
本篇文章主要介紹了vue2.0之多頁面的開發(fā)的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
Vue2.0 實(shí)現(xiàn)頁面緩存和不緩存的方式
今天小編就為大家分享一篇Vue2.0 實(shí)現(xiàn)頁面緩存和不緩存的方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue子組件props從父組件接收數(shù)據(jù)并存入data
這篇文章主要介紹了Vue子組件props從父組件接收數(shù)據(jù)并存入data的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
關(guān)于vue-cli-service:command?not?found報(bào)錯(cuò)引發(fā)的實(shí)戰(zhàn)案例
這篇文章主要給大家介紹了關(guān)于vue-cli-service:command?not?found報(bào)錯(cuò)引發(fā)的相關(guān)資料,文中通過實(shí)例代碼將解決的過程介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-02-02
vue中傳參params和data的區(qū)別
本文主要介紹了vue中傳參params和data的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04