Element UI 表格自定义合计行逻辑

getSummaries(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.align.toString().trim()=='is-right'){//如果当前列的排序方式是右边则进行合计结算
					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;
		}

因为表格渲染为文字左对齐 数字类型右对齐 所以只需要对列的对齐方向做判断 就可以对特定列做合计了

-------------------------------------------------------------更新---------------------------------------------------------------

在使用Element 的Table一次性渲染非常多的数据时出现了页面卡死 加载事件过长的情况

之后发现了一个非常不错的解决方案：umy-ui 的虚拟表格

使用虚拟表格一次性渲染大量数据时不会造成页面的过长加载已经内存溢出等问题

文档链接：http://129.211.13.167/#/wel/component/virtualScrolling

基本使用过程和element差不多 引用一个js和css 然后使用他们的组件 里面的属性基本上和el组件的属性是一致的 但是也有新增的其他属性 也有些方法做出了改变 使用时还是需要对照API看一下的

其次umy的虚拟表格的合计行和el的合计行是有区别的 这里尤其注意！

具体的不同可以去http://129.211.13.167/#/wel/component/totalTable这里查看