vue 数字转千分位js

处理千分位并且保留两位小数1:function函数

复制代码
{{ scope.row.dqyszje == 0 ? '' : keepTwoDecimalFull(scope.row.dqyszje) }}
{{ keepTwoDecimalFull(form.projectBudget).toFixed(2) }}

    keepTwoDecimalFull(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:filters过滤器写法

复制代码
<template slot-scope="scope">
      <div style="text-align: right">{{ scope.row.contractAmount | numFilter }}</div>
</template>

  filters: {
    numFilter(value) {
      if (value === 0 || value === 0.0 || value === 0.0 || value === '0.0' || value === '0.00') {
        return '0.00';
      }
      if (value == null || value == 'null') {
        return;
      }
      let sym = '';
      if (value && value.toString()[0] == '-') {
        sym = '-';
      }
      // 获取整数部分
      let intPart = Math.trunc(value);
      intPart = Math.abs(intPart);
      // 整数部分处理,增加,
      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(); // 取得小数部分
      }
      if (floatPart === '') {
        floatPart = '00';
      }
      return sym + intPartFormat + '.' + floatPart;
    },
  },

简便写法处理数字千分位转化

复制代码
        // 数字转千分符
        function toThousandSeparator(value) {
            return value.replace(/(\d)(?=(\d{3})+(\.|$))/g, "$1,");
        }
        // 千分符转数字
        function toNumber(value) {
            const cleanedValue = value.replace(/,/g, '');
            return parseFloat(cleanedValue);
        }

创建公共的js方法

复制代码
{{ scope.row.totalAmountPaid | filterNumZero }}         
  filters: {
    filterNumZero(value) {
      return numFilterZero(value, false);
    },
  },
  

import { numFilterZero } from '@/views/projectContractManagementView/components/common.js';

common.js:
/**
 * 千分位
 * @param {String} value 数字
 * @param {Boolean} isShowZero  value为0时是否显示
 * @param {Number} floatLen  小数位的长度
*/
const numFilter = (value, isShowZero = true, floatLen = 2) => {
    if (value == 'null' || value == null || String(value) == "") {
        value = 0
    }
    value = parseFloat(value).toFixed(floatLen)
    if (value == 0 || value == '0' || value == '0.0' || value == '0.00' || value == 'null' || value == null) {
        if (isShowZero) {
            return value
        } else {
            return ''
        }
    }
    let sym = "";
    if (value && value.toString()[0] == '-') {
        sym = '-'
    }
    // 获取整数部分
    let intPart = Math.trunc(value)
    intPart = Math.abs(intPart)
    // 整数部分处理,增加,
    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 (sym + intPartFormat + '.' + floatPart)
    }
    return (sym + intPartFormat)
}

/**
 * 金额处理 最大值为999999999.99,最多允许两位小数;
 * @param {*} num 
 */
const moneyVerifyFirst = (num) => {
    console.log(num, "villageManagementvillageManagementvillageManagement");
    if (Number(num) > Number(999999999.99)) {
        return 999999999.99;
    } else {
        return num
            .replace(/^0[0-9]+/, (num) => num[1])
            .replace(/^(\.)+/, "")
            .replace(/[^\d.]/g, "")
            .replace(/^(-)*(\d\d\d\d\d\d\d\d\d\d)*$/, "$1")
            .replace(/\.+/, ".")
            .replace(".", "$#$")
            .replace(/\./g, "")
            .replace("$#$", ".")
            .replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
    }
}
const amend = (firstNumber, secondNumber, symbol) => {
    symbol = symbol || '+';
    let firstDecimal =
        firstNumber.toString().indexOf('.') != -1 ? firstNumber.toString().split('.')[1].length : 0;
    let secondDecimal =
        secondNumber.toString().indexOf('.') != -1
            ? secondNumber.toString().split('.')[1].length
            : 0;
    let maxDecimal = secondDecimal > firstDecimal ? secondDecimal : firstDecimal;
    let result = 0;
    let firstInt =
        parseInt(firstNumber.toString().replace('.', '')) * Math.pow(10, maxDecimal - firstDecimal);
    let secondInt =
        parseInt(secondNumber.toString().replace('.', '')) *
        Math.pow(10, maxDecimal - secondDecimal);
    switch (symbol) {
        case '+':
            result = firstInt + secondInt;
            return result / Math.pow(10, maxDecimal);
        case '-':
            result = firstInt - secondInt;
            return result / Math.pow(10, maxDecimal);
        case '*':
            result = firstInt * secondInt;
            return result / Math.pow(10, maxDecimal * 2);
        case '/':
            return (result = firstInt / secondInt);
        default:
            result = firstInt + secondInt;
            return result / Math.pow(10, maxDecimal);
    }
}
export { numFilter, moneyVerifyFirst, amend }
相关推荐
鬼手点金2 小时前
nanoGPT/nanochat 能做出 DeepSeek/Qwen 这样的大模型吗?
服务器·前端·javascript·bug·openclaw
软件技术NINI3 小时前
美妆商城html+Css+js 4页
javascript·css·html
蛋蛋的就会顺顺的3 小时前
hot100 p0——栈,贪心算法,动态规划
java·前端·javascript·算法·leetcode·力扣
程序员Sunday3 小时前
TypeScript 的 any、unknown、never 有什么区别?
前端·面试·typescript
朱涛的自习室3 小时前
70 美金的 Beyond Compare,我让 Gemini 4 和 DeepSeek 造个开源免费版(Day 2)
android·前端·人工智能
码艺-Alimjan4 小时前
Tauri 源码备份 · 打包 & 解压 总结,源码收集之路
前端·javascript·vue.js
小马不起床4 小时前
零基础玩转 FastAPI_11:前端后台管理页面
前端·状态模式·fastapi
子非鱼a5 小时前
【文件上传】一个普普通通的edu16
前端
美狐美颜SDK开放平台6 小时前
直播APP如何实现美白滤镜功能?视频美颜SDK技术开发方案详解
前端·数据库·人工智能·音视频·美颜sdk·直播美颜sdk·视频美颜sdk
pride.li6 小时前
第03章 Python 教程-基础语法:注释与变量
服务器·前端·后端·python·算法·计算机视觉