elementui中的table表格在最后一行求和并且指定计算合计列

项目场景:

项目中一些表格报表需要计算金额,所以调用组件实现此功能


解决方案:

调用elementui里面的组件

Element - The world's most popular Vue UI framework

//指定列求和
	const getSummaries= function(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				 if (index === 0) {
				   sums[index] = '合计';
				   return;
				 }
				 const values = data.map(item => Number(item[column.property]));
				     if (column.property === 'charges'||column.property ==='total_costs' || column.property==='total_charges') {
							sums[index] = values.reduce((prev, curr) => {
							 const value = Number(curr);
							 if (!isNaN(value)) {
							   return prev + curr;
							 } else {
							   return prev;
							 }
							}, 0);
							// sums[index] = Math.round(sums[index]*100)/100;
							sums[index] = sums[index].toFixed(2)
 
				     }
				});
				return sums
	    	}

若需要保留整数,也可以使用 Math.round(x) 方法,可把一个数字舍入为最接近的整数:

sums[index] = Math.round(sums[index]*100)/100;

你可能感兴趣的:(前端,java,javascript)