【Element-UI 表格表头、内容合并单元格】

news2024/10/8 22:10:55

一、实现效果：

在这里插入图片描述

🥰 表头合并行、合并列 🥰

🥰 表格内容行、合并列 🥰

thead和tbody分别有单独的合并方法

二、关键代码：

<el-table size="mini" class="table-th-F4F6FB" align="center" ref="myTable2"
			v-loading="tableInfo2.loading" :header-cell-style="headerStyle2" :span-method="objectSpanMethod2"
			highlight-current-row element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableInfo2.tableData" border style="width: 100%">
			<el-table-column show-overflow-tooltip prop="name" align="center" label="班级" />
			<el-table-column show-overflow-tooltip prop="subName" align="center" label="班级" />
			<el-table-column align="center" label="性别">
				<el-table-column align="center" label="boy" prop="boy"></el-table-column>
				<el-table-column align="center" label="girl" prop="girl"></el-table-column>
	</el-table-column>
</el-table>


headerStyle2({
	row,
	column,
	rowIndex,
	columnIndex
}) {
	const comStyle = {
		backgroundColor: "#F4F6FB",
		color: "#909399",
		fontSize: "500",
	};

	if (rowIndex === 0) {
		row[0].colSpan = 0; // 将表头第一列和第二列合并，内容展示为第二列的内容
		row[1].colSpan = 2;
		if (columnIndex === 0) { // 将表头第一列隐藏
			return {
				display:"none",
				...comStyle,
			};
		}
	}
	return comStyle;
},
			
			
objectSpanMethod2({
	row,
	column,
	rowIndex,
	columnIndex
}) {
	// 合并单元格
	if (columnIndex === 0 && (rowIndex == 0 || rowIndex == 1 || rowIndex == 2)) {
		return {
			rowspan: 1,
			colspan: 2
		};
	}
	// 隐藏多余的单元格
	if (columnIndex === 1 && (rowIndex == 0 || rowIndex == 1 || rowIndex == 2)) {
		return {
			rowspan: 0,
			colspan: 0
		};
	}

	// 合并单元格
	if (columnIndex === 0 && rowIndex == 3) {
		return {
			rowspan: 2,
			colspan: 1
		};
	}
	// 隐藏多余的单元格
	if (columnIndex === 0 && (rowIndex == 4 )) {
		return {
			rowspan: 0,
			colspan: 0
		};
	}
},