vue element 表格合计行 合并

表格最下面合计一行的合并  详细代码在最下方

先看图片的效果是否符合自己的业务    ，符合的话就看看我找的的解决方案吧，搞这个真的头大

  先看这里     id="tables" :summary-method="getSummaries" show-summary   很重要！！！！！

<el-table :data="tableData" id="tables" :summary-method="getSummaries" show-summary>

再来个监听   下面的注释记得看一下

watch: {
		//监听tableData
		tableData: {
			// 立即监听
			immediate: true,
			handler() {
				this.$nextTick(() => {
					const tds = document.querySelectorAll('#tables .el-table__footer-wrapper tr>td');
				    // colSpan合并列  这里打印一下看一下
			    	console.log(tds)
					tds[0].colSpan = 3;  // 这里是要合并几行
					tds[0].style.textAlign = 'center';
					tds[1].style.display = 'none'; // 上述合并3行也就对应的隐藏到第3个格子
					tds[2].style.display = 'none';
// 这里注意一下  要合并几行就隐藏到第几个格子，我合并3个格子，第0个格子是 合计 字段不用隐藏，后面两个要隐藏因为是合并3个嘛，  我在这踩过坑 哭死
				});
			}
		}
	},

监听主要是合并哪些格子，下面是计算直接官网的方法进行没大改

getSummaries(param) {
		    const { columns, data } = param;
		    const sums = [];
		    columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '合计：';
					return;
				}else if(index === 1||index === 2){//只有这里改了一下
					// sums[index] = 'N/A';
					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;
		},

(详情代码) 最底部的合并   测试的你们直接复制试试就行

<template>
	<div>
		<el-table :data="tableData" border height="200" style="width: 100%; margin-top: 20px" id="tables" :summary-method="getSummaries" show-summary>
			<el-table-column prop="id" label="ID" width="180"></el-table-column>
			<el-table-column prop="name" label="姓名"></el-table-column>
			<el-table-column prop="amount1" label="数值 1（元）"></el-table-column>
			<el-table-column prop="amount2" label="数值 2（元）"></el-table-column>
			<el-table-column prop="amount3" label="数值 3（元）"></el-table-column>
		</el-table>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tableData: [
				{
					id: '12987122',
					name: '王小虎',
					amount1: '234',
					amount2: '3.2',
					amount3: 10
				},
				{
					id: '12987123',
					name: '王小虎',
					amount1: '165',
					amount2: '4.43',
					amount3: 12
				},
				{
					id: '12987124',
					name: '王小虎',
					amount1: '324',
					amount2: '1.9',
					amount3: 9
				},
				{
					id: '12987125',
					name: '王小虎',
					amount1: '621',
					amount2: '2.2',
					amount3: 17
				},
				{
					id: '12987126',
					name: '王小虎',
					amount1: '539',
					amount2: '4.1',
					amount3: 15
				}
			]
		};
	},
	watch: {
		//监听table这个对象
		// tableData: {   // !!!!!!!注意这里注释的这段代码是方便理解  要合并几行 对应下面的
		// 	immediate: true,
		// 	handler() {
		// 		this.$nextTick(() => {
		// 			const tds = document.querySelectorAll('#tables .el-table__footer-wrapper tr>td');
		// 		// colSpan合并列
		// 		console.log(tds)
		// 			tds[0].colSpan = 3;
		// 			tds[0].style.textAlign = 'center';
		// 			tds[1].style.display = 'none';
		// 			tds[2].style.display = 'none';
		// 		});
		// 	}
		// },
		tableData: {
			// 立即监听
			immediate: true,
			handler() {
				this.$nextTick(() => {
					const tds = document.querySelectorAll('#tables .el-table__footer-wrapper tr>td');
				// colSpan合并列
				console.log(tds)
					tds[0].colSpan = 2;
					tds[0].style.textAlign = 'center';
					tds[1].style.display = 'none';
				});
			}
		}
	},
	methods: {
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				// if (index === 0) {  // 上面注释的那段代码对应这段！！！！！！！！！！！
				// 	sums[index] = '总价';
				// 	return;
				// }else if(index === 1||index === 2){
				// 	return;
				// }
				if (index === 0) {
					sums[index] = '总价';
					return;
				}else if(index === 1){
					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;
		}
	}
};
</script>

<style></style>

最终效果