vue中实现千位分隔符的示例代码
更新时间：2023年11月09日 14:52:07 作者：君故于时
本文主要介绍了vue中实现千位分隔符的示例代码,主要两种方法,一种是某一个字段转换,一种是表格table中的整列字段转换,具有一定的参考价值,感兴趣的可以了解一下
vue中实现千位分隔符有两种，一种是某一个字段转换，一种是表格table中的整列字段转换
比如将3236634.12，经过转换后变为 3,236,634.12
1. 某一个字段转换
写js方法：
export function numberExchange(value){
if (!value) return 0
// 获取整数部分
const intPart = Math.trunc(value)
// 整数部分处理，增加,
const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
// 预定义小数部分
let floatPart = ''
// 将数值截取为小数部分和整数部分
const valueArray = value.toString().split('.')
if (valueArray.length === 2) {
// 有小数部分
floatPart = valueArray[1].toString() // 取得小数部分
return intPartFormat + '.' + floatPart
}
return intPartFormat + floatPart
}
直接调用方法即可：
2. 表格table中的整列字段转换
加入: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中调用该方法：
:formatter=“numberFormat”
效果：
到此这篇关于vue中实现千位分隔符的示例代码的文章就介绍到这了,更多相关vue 千位分隔符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了Vue3中同时定义多个插槽的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
vue3不能使用history.pushState修改url参数踩坑
这篇文章主要为大家介绍了vue3不能使用history.pushState修改url参数踩坑解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,下面这篇文章主要给大家介绍了关于前端vue3使用axios调用后端接口的实现方法,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了详解关于vue-area-linkage走过的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家介绍了vue页面渲染数组中数据文案后添加逗号最后不加逗号示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
本篇文章主要介绍了vue2.0之多页面的开发的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
今天小编就为大家分享一篇Vue2.0 实现页面缓存和不缓存的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了Vue子组件props从父组件接收数据并存入data的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
关于vue-cli-service:command not found报错引发的实战案例
这篇文章主要给大家介绍了关于vue-cli-service:command not found报错引发的相关资料,文中通过实例代码将解决的过程介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02
本文主要介绍了vue中传参params和data的区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论