小工具知识网

当前位置: 首页 > 行业知识 > Vue前端,数值转换为千分位格式,并保留两位小数

行业知识

Vue前端,数值转换为千分位格式,并保留两位小数

2026-11-15 11:57:48 来源:互联网转载

1.前端使用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  

至此结束。

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;  }

上一篇:揭秘微信公众号平台源码,核心功能与吸引力之源深度探索!

下一篇:揭秘产品魅力,独特亮点吸引眼球,一探究竟!