效果图
1、如果el-table表格表尾没有合计行的话,可以使用下面例子
a、
<el-table-column label="借方发生额" align="right" width="160" :show-overflow-tooltip="true" > <template slot-scope="scope">{{ numberFormat(scope.row.jffse) }}</template> </el-table-column>
methods: { numberFormat(cellValue) { return cellValue ? cellValue.toLocaleString() : ""; }, }
<el-table-column label="资金" prop="zj" :formatter="stateFormat" show-overflow-tooltip/>
stateFormat(cellValue) { if (cellValue) { cellValue += ""; if (!cellValue.includes(".")) cellValue += "."; return cellValue .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => { return $1 + ","; }) .replace(/\.$/, ""); } },
如果固定两位小数,可以这样
stateFormat(cellValue) { if (cellValue) { return Number(cellValue) .toFixed(2) .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => { return $1 + ","; }) .replace(/\.$/, ""); } },
2、如果有表尾合计行的话,使用下面例子
<el-table :data="mxData" :header-cell-style="{ 'text-align': 'center' }" :max-height="maxHeight" highlight-current-row :summary-method="getSummaries" show-summary > <el-table-column label="借方金额" prop="ndebit" align="right" width="160" :show-overflow-tooltip="true" > <template slot-scope="scope">{{ stateFormat(scope.row.ndebit) }}</template> </el-table-column> <el-table-column label="贷方金额" prop="ncredit" align="right" width="160" :show-overflow-tooltip="true" > <template slot-scope="scope">{{ stateFormat(scope.row.ncredit) }}</template> </el-table-column> </el-table>
上面的<template slot-scope="scope">{{stateFormat(scope.row.ncredit)}}</template>也可以使用方法1中的numberFormat方法格式化,但是合计方法getSummaries里面的合计数就得使用本例子的stateFormat方法格式化了,因为我试了
numberFormat函数格式化没效果。
stateFormat(cellValue) { if (cellValue) { return Number(cellValue) .toFixed(2) .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => { return $1 + ","; }) .replace(/\.$/, ""); } }, getSummaries(param) { const indexs = [0, 2, 3]; // console.log("---param=", param); const { columns, data } = param; const sums = []; columns.forEach((column, index) => { if (index === 1) { sums[index] = "合计"; return; } else if (indexs.includes(index)) { sums[index] = ""; return; } // console.log(data); const values = data.map((item) => Number(item[column.property])); // console.log(values); if (values.every((value) => /^(-)?([0-9]+)(\.\d{1,2})?$/.test(value))) { sums[index] = values.reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) { return prev + curr; } else { return prev; } }, 0); sums[index] = this.stateFormat(sums[index].toFixed(2)); // sums[index] += " 元"; } else { sums[index] = ""; } }); return sums; },