软件开发培训班 >> 编程开发 >> JavaScript


Vue前端数值转换为千分位格式并保留两位小数代码示例

1.前端使用elg-pro-table 数据表格：

<elg-pro-table
          class="custom-card"
          ref="table"
          :datasource="url"
          :columns="columns"
          :where="where"
          :border="true"
          :toolkit="[]"
          toolbar
          :loading="loading"
        >
</elg-pro-table>

2.其中使用是columns表格：

 // 表格列配置
 columns: [
        {
          prop: 'voucherNo',
          label: '凭证号',
          showOverflowTooltip: true,
          minWidth: 100 ,
          className: 'textType'
        },
        {
          prop: 'originalCurrencyDebit',
          label: '借方金额',
          showOverflowTooltip: true,
          minWidth: 120,
          className: 'moneyType',
          formatter:  (value) => {//使用formatter，其中value是整个columns中的一行数据
              //value.originalCurrencyDebit和上面的prop的内容一致
              return commonApi.changeMoney(value.originalCurrencyDebit);
          }
        },
],

3.其中commonApi.changeMoney(）方法是引用的一个api方法：

//数值转换
changeMoney(value){
   if(value === ""){//当value为空时，前台显示-
         return '-'
   }else{
//当value等于0或者是字符串0时，显示-
        if ("0.00"===value || "0"===value || value ===0 || value ===0.00) {
           return '-'
        }else{
//判断一个变量value是否小于0 。如果value小于0，那么isNegative的值就是true，否则就是false 。
   let isNegative = value < 0;
//下面一行代码是将一个数值value转换为千分位格式的字符串，并保留两位小数 。具体步骤如下：
 //1.使用Math.abs(value)函数获取value的绝对值，确保结果为正数 。
 //2.使用parseFloat()函数将绝对值转换为浮点数类型 。
 //3.使用toFixed(2)方法将浮点数保留两位小数 。
 //4.使用正则表达式/d(?=(d{3})+.)/g匹配小数点前的每三位数字，并在其前面添加逗号分隔符 。
 //5.最终得到的结果存储在变量result中 。
 let result = parseFloat(Math.abs(value)).toFixed(2).replace(/d(?=(d{3})+.)/g, '$&,');
        if (isNegative) {//当isNegative是false时，下面的数据加上-，
            result = '-' + result;
         }
         return  result
        }
    }
},

至此结束 。

style小贴士：

<style>
        /* 默认居中 */
  .custom-card .el-table__body td {
      text-align: center;
  }
  /* 金额类居右 */
  .custom-card .el-table__body td.moneyType {
      text-align: right;
  }
  /* 文本类居左 */
  .custom-card .el-table__body td.textType {
      text-align: left;
  }
</style>

总结 

到此这篇关于Vue前端数值转换为千分位格式并保留两位小数的文章就介绍到这了,更多相关Vue数值转换千分位保留小数内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！