vue3 el-table合并表格

1.el-table标签内设置 

<el-table :span-method="objectSpanMethod"></el-table>

2.使用方法合并

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
	if (false)	console.log(row, column, rowIndex, columnIndex);
	if (columnIndex === 1) {
		const rowspan = row[`rowspan_orderNo`];
		if (rowspan) {
			return {
				rowspan: rowspan, // 从当前单元格开始，执行合并2行
				colspan: 1 // 从当前单元格开始，执行合并1列
			};
		} else {
			return {
				rowspan: 0, // 为0，不执行合并
				colspan: 0 // 为0，不执行合并
			};
		}
	}
};

3.在获取表格数据的地方调用该方法设置单元格合并的位置及数量

//存储合并单元格的开始位置
const setTabelRowSpan = (tableData, fieldArr, effectMerge = {}) => {
	let lastItem = {};
	fieldArr.forEach((field, index) => {
		let judgeArr = fieldArr.slice(0, index + 1);
		if (effectMerge[field]) {
			judgeArr = [...effectMerge[field], field]; //[area,field]
		}
		tableData.forEach(item => {
			item.mergeCell = fieldArr;
			const rowSpan = `rowspan_${field}`;
			// 判断是否合并到上个单元格。
			if (judgeArr.every(e => lastItem[e] === item[e] && item[e] !== "")) {
				// 判断是否所在行的列对应的值全部相同，并且此列的值不为空
				// 是：合并行
				item[rowSpan] = 0;
				lastItem[rowSpan] += 1;
			} else {
				// 否：完成一次同类合并。lastItem重新赋值，进入下一次合并计算。
				item[rowSpan] = 1;
				lastItem = item;
			}
		});
	});
};

const effectMerge = {
        //合并字段:参照字段
		orderNo: ["orderNo"] //合并参照订单号
};
// 参数[表格数据，字段列表，合并的条件]
setTabelRowSpan(tableData, ["orderNo"], effectMerge); //调用方法，确定合并的位置及数量