Vue3 ElementPlus-table组件(合计)合并列

 在使用ElementPlus的table组件的时候，我们通常会处理合计，当遇到合计行需要合并列的时候，可以这样做。

 核心就是获取标签，对标签的CSS样式进行设置，以达到合并单元格的效果。

Template

		<el-table
			max-height="calc(100vh - 240px)"
			ref="tableRef"
			border
			:data="tableData"
			show-summary
			:span-method="spanMethod"
			:header-cell-style="{ color: '#333', backgroundColor: '#f5f7fa', textAlign: 'center' }"
			style="width: 100%"
			align="center"
		>

Script 

import { ref, nextTick } from "vue";
const table = ref();
const spanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
	nextTick(() => {
		if (tableRef.value.$el) {
			let current = tableRef.value.$el.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer");
			let cell = current.rows[0].cells;
			cell[0].style.textAlign = "center"; // 合计行第一列字段居中显示。
			cell[1].style.display = "none";
			cell[0].colSpan = "2"; // 合并单元格
		}
	});
};