Vue+Element-ui Table 列求和

Vue代码

<el-table v-loading="loading" :data="standardList" 
	@sort-change='sortChange' :summary-method="getSummaries" show-summary @selectionchange="handleSelectionChange">

这两个一定要加上 :summary-method=“getSummaries” show-summary，
show-summary 也必须加上，如果不加，底部不会显示；
getSummaries对应的计算的函数

求和getSummaries

把getSummaries放在 methods: {}里面即可

getSummaries(param) {
     
	const {
      columns, data } = param
	const sums = []
	columns.forEach((column, index) => {
     
		if (index === 0) {
     
			sums[index] = '合计'
		} 
		// index >= 3 || index <= 11 是你需要计算的列
		// 当然也可以指定一个或者多个列
		// index === 2 || index === 3 这样值求和第二个与第三个列
		else if (index >= 3 && index <= 11) {
     
			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 Math.floor((prev + curr) * 100) / 100;
					} else {
     
						// 保存了两位小数点
						return Math.floor(prev * 100) / 100;
					}
				}, 0)
			} else {
     
				sums[index] = 'N/A'
			}
		} else {
     
			sums[index] = ''
		}
	})
	return sums
},

效果图