el-table 单元格同时合并行和列span-method，表头合并header-cell-style

合并行、列

注意要写 else 的判断，否则被合并列/行的数据会往下一个列/行的单元格填充，

// 表格合并单元格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
	if (columnIndex === 0 || columnIndex === 1) { // 合并第 0 列和第 1 列，这里只需要操作第 0、1 列的单元格
		if (rowIndex === 0) { // 从第几行开始
			return [1, 1]     // 合并的行数，合并的列数，设为０则直接不显示（即省略某行,某列的值）
		}
		else if (rowIndex === 1) {  // 从第 1 行开始
			if (columnIndex === 0) { //如果是第 0 列
				return [2, 2] // 合并 2 行，2 列
			} else {
				return [0, 0]
			}
		}
		else if (rowIndex === 3) {
			return [2, 1]
		}
		else { // 合并几行，就省略几行的值，这里需要省略第 2、4 行的值
			return [0, 0]
		}
	}
}

 表头合并

使用 span-method 方法，隐藏第 0 列，让第 1 列占据两个单元格的宽度

const handerMethod = ({ row, column, rowIndex, columnIndex }) => {
	if (row[0].level == 1) {
		// 必须是row[0]=0 row[1]=2才会生效
		row[0].colSpan = 0
		row[1].colSpan = 2
		if (columnIndex === 0) {
			return { display: 'none' }
		}
	}
}

完整代码

<template>
	<div>
		<el-table
			:header-cell-style="handerMethod" 
			:data="tableData" 
			border 
			style="width: 50%"
			:span-method="objectSpanMethod">
			<!-- 第 0 列 -->
			<el-table-column prop="col1" label="表头1"/>
		
			<!-- 第 1 列 -->
			<el-table-column prop="col2" label="表头1"/>
		
			<!-- 第 2 列 -->
			<el-table-column prop="col3" label="表头2" />

			<!-- 第 3 列 -->
			<el-table-column prop="col4" label="表头3" />
		</el-table>
	</div>
</template>

<script setup>
import { reactive } from "vue";
// 表格数据
const tableData = reactive([
	{
		col1: 'col1',
		col2: 'col2',
		col3: 'col3',
		col4: 'col4',
	}, {
		col1: 'col1+2',
		col2: 'col2',
		col3: 'col3',
		col4: 'col4',
	}, {
		col1: 'col1+2',
		col2: 'col2',
		col3: 'col3',
		col4: 'col4',
	}, {
		col1: 'col1',
		col2: 'col2',
		col3: 'col3',
		col4: 'col4',
	}, {
		col1: 'col1',
		col2: 'col2',
		col3: 'col3',
		col4: 'col4',
	},
])
// 表格合并单元格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
	if (columnIndex === 0 || columnIndex === 1) { // 合并第 0 列和第 1 列
		if (rowIndex === 0) { // 从第几行开始
			return [1, 1]     // 合并的行数，合并的列数，设为０则直接不显示
		}
		else if (rowIndex === 1) {  // 从第 1 行开始
			if (columnIndex === 0) { //如果是第 0 列
				return [2, 2] // 合并 2 行，2 列
			} else {
				return [0, 0]
			}
		}
		else if (rowIndex === 3) {
			return [2, 1]
		}
		else { // 合并几列，就省略几列的值
			return [0, 0]
		}
	}
}
const handerMethod = ({ row, column, rowIndex, columnIndex }) => {
	if (row[0].level == 1) {
		// 必须是row[0]=0 row[1]=2才会生效
		row[0].colSpan = 0
		row[1].colSpan = 2
		if (columnIndex === 0) {
			return { display: 'none' }
		}
	}
}
</script>

<style lang="scss" scoped>
</style>