vue表格(table)计算总计方式

更新时间：2022年07月31日 10:02:40 作者：manyuejizhao

这篇文章主要介绍了vue表格(table)计算总计方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue 表格计算总计

<el-table
        v-loading="loading"
        :summary-method="getSummaries"
        show-summary
        :data="abcList"
        border
        tooltip-effect="darkTable"
      >

首先需要在table标签中添加

:summary-method="getSummaries"  // 调用方法
show-summary  //标签属性
methods: {
  getSummaries(param) {
    const { columns, data } = param
    console.log(columns, data, 'columns,data')
    const sums = []
    columns.forEach((column, index) => {
      // 设置第一列的值为总计
      if (index === 0) {
        sums[index] = '总计'
        return
      }
        sums[3] = this.form.result
        sums[3] += '元'
    })
    return sums
   }
}

因为Element上计算总计的方法是计算当前页上金额的总和，稍加修改~

sums[index] = '总计'  
// 把下标为0的列赋值为总计
sums[3] = this.form.result  
// this.form.result为init初始化时从接口中拿到的总计，赋值到下标为3的列上
sums[3] += '元'
// 得到的总计后加上单位元

vue table表格合计 ( Element )

<template>
	<el-card class="box-card">
		<!-- 只合计不做其他处理 -->
		<h2>只合计不做其他处理</h2>
		<el-table :data="tableData6" border show-summary style="width: 100%">
			<el-table-column prop="id" label="ID" width="180" align="center">
			</el-table-column>
			<el-table-column prop="name" label="产品" align="center">
			</el-table-column>
			<el-table-column prop="number" label="数量" align="center">
			</el-table-column>
			<el-table-column prop="price" label="价格" align="center">
			</el-table-column>
			<el-table-column prop="profit" label="利润率" align="center">
			</el-table-column>
		</el-table>
 
		<!-- 简单求和实例处理 -->
		<h2 style="margin-top:100px">简单求和实例处理</h2>
		<el-table :data="tableData6" border :summary-method="getSummaries01" show-summary style="width: 100%;">
			<el-table-column prop="id" label="ID" width="180" align="center">
			</el-table-column>
			<el-table-column prop="name" label="产品" align="center">
			</el-table-column>
			<el-table-column prop="number" label="数量" align="center">
			</el-table-column>
			<el-table-column prop="price" label="价格" align="center">
			</el-table-column>
			<el-table-column prop="profit" label="利润率" align="center">
			</el-table-column>
		</el-table>
 
		<!-- 指定列求和实例处理 -->
		<h2 style="margin-top:100px">指定列求和实例处理</h2>
		<el-table :data="tableData6" border :summary-method="getSummaries02" show-summary style="width: 100%;">
			<el-table-column prop="id" label="ID" width="180" align="center">
			</el-table-column>
			<el-table-column prop="name" label="产品" align="center">
			</el-table-column>
			<el-table-column prop="number" label="数量" align="center">
			</el-table-column>
			<el-table-column prop="price" label="价格" align="center">
				<template slot-scope="scope">
					{{$utils.formSum(scope.row.price, 2, '.', ',')}}
				</template>
			</el-table-column>
			<el-table-column prop="profit" label="利润率" align="center">
				<template slot-scope="scope">
					{{Number(scope.row.profit).toFixed(2)}} %
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

 
<script>
	export default {
		data() {
			return {
				tableData6: [{
					id: '12987122',
					name: '袜子',
					number: '234',
					price: '3',
					profit: '10.9'
				}, {
					id: '12987123',
					name: '鞋子',
					number: '165',
					price: '343.8',
					profit: '12.00'
				}, {
					id: '12987124',
					name: '裤子',
					number: '324',
					price: '249.0',
					profit: '9'
				}, {
					id: '12987125',
					name: '腰带',
					number: '621',
					price: '342.0',
					profit: '17.00'
				}, {
					id: '12987126',
					name: '手镯',
					number: '539',
					price: '43421',
					profit: '153333'
				}]
			};
		},
		methods: {
			//格式化数字，格式化金额
			// formSum: function(number, decimals, dec_point, thousands_sep) {
			//   /*   
			//     * 参数说明：
 
			//     * number：要格式化的数字
 
			//     * decimals：保留几位小数
 
			//     * dec_point：小数点符号
 
			//     * thousands_sep：千分位符号
 
			//     * */
			//   number = (number + '').replace(/[^0-9+-Ee.]/g, '');
			//   var n = !isFinite(+number) ? 0 : +number,
			//     prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
			//     sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
			//     dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
			//     s = '',
			//     toFixedFix = function(n, prec) {
			//       var k = Math.pow(10, prec);
			//       return '' + Math.ceil(n * k) / k;
			//     };
			//   s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
			//   var re = /(-?\d+)(\d{3})/;
			//   while (re.test(s[0])) {
			//     s[0] = s[0].replace(re, "$1" + sep + "$2");
			//   }
			//   if ((s[1] || '').length < prec) {
			//     s[1] = s[1] || '';
			//     s[1] += new Array(prec - s[1].length + 1).join('0');
			//   }
			//   return s.join(dec);
			// }
			/**
			 * 将show-summary设置为true就会在表格尾部展示合计行。
			 * 默认情况下，对于合计行，第一列不进行数据求合操作，
			 * 而是显示「合计」二字（可通过sum-text配置），
			 * 其余列会将本列所有数值进行求合操作，并显示出来。
			 * 当然，你也可以定义自己的合计逻辑。
			 * 使用summary-method并传入一个方法，返回一个数组，
			 * 这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。
			 */
 
			//简单求和实例处理
			getSummaries01(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 (!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] += ' 元';
					} else {
						sums[index] = 'N/A';
					}
				});
				return sums;
			},
 
 
 
			//指定列求和实例处理
			getSummaries02(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总价';
					} else if (index === 3) { //对价格做处理：保留两位小数
						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] = this.$utils.formSum(sums[index], 2, '.', ',');
						} else {
							sums[index] = '/';
						}
					} else if (index === 4) { //对利润率做处理：保留两位小数
						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] = sums[index].toFixed(2);
							sums[index] += ' %';
						} else {
							sums[index] = '/';
						}
					} 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);
						} else {
							sums[index] = '/';
						}
					}
				});
				return sums;
			}
		}
	};
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue生命周期与钩子函数简单示例
这篇文章主要介绍了vue生命周期与钩子函数,结合简单实例形式分析了vue.js生命周期及钩子函数相关流程与实现技巧,需要的朋友可以参考下
2019-03-03
Vue组件上使用v-model之单选框
这篇文章主要介绍了Vue组件上使用v-model之单选框,代码分为子组件内容和父组件内容，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
Element实现复杂table表格结构的项目实践
本文主要介绍了Element实现复杂table表格结构的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
Vue.native如何将原生事件绑定到组件
这篇文章主要介绍了Vue.native如何将原生事件绑定到组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue实现简单弹窗效果
这篇文章主要为大家详细介绍了Vue实现简单弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
three.js实现vr全景图功能实例(vue)
去年全景图在微博上很是火爆了一阵,正好我也做过一点全景相关的项目,下面这篇文章主要给大家介绍了关于three.js实现vr全景图功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-05-05
Springboot运用vue+echarts前后端交互实现动态圆环图
我们做项目的时候，常常需要一些统计图来展示我们的数据，作为web开发人员，会实现统计图是我们必会的技能。我将带大家来实现动态饼图的实现，感兴趣的可以了解一下
2021-06-06
vue中v-mode详解及使用示例详解
这篇文章主要介绍了vue中v-mode详解以及具体的使用示例,在组件中使用 v-model 时,需要定义model选项,指定绑定的prop和事件,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
2024-03-03
浅谈vuex actions和mutation的异曲同工
这篇文章主要介绍了浅谈vuex actions和mutation的异曲同工，详细的介绍了actions和mutation的使用和区别，非常具有实用价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
Node.js path模块,获取文件后缀名操作
这篇文章主要介绍了Node.js path模块,获取文件后缀名操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11

vue表格(table)计算总计方式

目录

vue 表格计算总计

vue table表格合计 ( Element )

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具