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
},

效果圖