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

<code><elg-pro-table

class="custom-card"code>

ref="table"code>

:datasource="url"code>

:columns="columns"code>

:where="where"code>

:border="true"code>

:toolkit="[]"code>

toolbar

:loading="loading"code>

>

</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>