废话不多说,直接上图,上代码。
金额控制大写转换的代码:
function moneyChange(n) {
//金额大写转换
if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n))
return "数据非法";
var unit = "千百拾亿千百拾万千百拾元角分", str = "";
n += "00";
var p = n.indexOf('.');
if (p >= 0)
n = n.substring(0, p) + n.substr(p + 1, 2);
unit = unit.substr(unit.length - n.length);
for (var i = 0; i < n.length; i++)
str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(
/零(万|亿|元)/g, "$1").replace(/(亿)万|零(拾)/g, "$1$2").replace(
/^元零?|零分/g, "").replace(/元$/g, "元整");
}
页面代码:
<template>
<el-table
:data="tableData"
border
show-summary
:summary-method="getSummaries"
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
sortable
label="数值 1">
</el-table-column>
<el-table-column
prop="amount2"
sortable
label="数值 2">
</el-table-column>
<el-table-column
prop="amount3"
sortable
label="数值 3">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
};
},
watch: {
tableData: {
async handler () {
await this.$nextTick()
const tds = document.querySelectorAll('#m_table .el-table__footer-wrapper td') // 获取尾部的表格td
console.log(tds)
if (tds.length > 0) {
tds[0].colSpan = 2 // 合并底部1、2单元格为1个格子
tds[0].getElementsByTagName('div')[0].style.textAlign = 'left' // 底部样式居左
tds[1].style.display = 'none' // 隐藏第二个格子
}
},
immediate: true, // 立即执行
deep: true // 深度监听
}
},
methods: {
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '实缴金额(大写)';
return;
} else {
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0)
sums[index] = Number(sums[index]).toFixed(2) // 保留两位小数
if (index === columns.length - 1) {
sums[0] += numChange(values.reduce(prev, curr)=>{
let value = Number(curr)
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
})
}
} else {
sums[index] = ''
}
}
})
return sums
}
}
}
</script>