vue3 el-table 根据id合并指定列单元格

参考文章：https://www.cnblogs.com/gggggggxin/p/14311726.html

在mounted方法中调用 onMergeLines() 

const onMergeLines = () => {
	// 先给所有的数据都加一个v.rowspan = 1
	tableData.value.forEach((item) => {
		item.rowspan = 1
	})
	// 双层循环
	for (let i = 0; i < tableData.value.length; i++) {
		// 内层循环，上面已经给所有的行都加了item.rowspan = 1
		// 这里进行判断
		// 如果当前行的cid和下一行的cid相等
		// 就把当前item.rowspan + 1
		// 下一行的item.rowspan - 1
		for (let j = i + 1; j < tableData.value.length; j++) {
			//此处可根据相同字段进行合并，此处是根据的id
			if (tableData.value[i].id === tableData.value[j].id) {
				tableData.value[i].rowspan++
				tableData.value[j].rowspan--
			}
		}
		// 这里跳过已经重复的数据
		i = i + tableData.value[i].rowspan - 1
	}
}

//合并单元格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
	//第一列
	if (columnIndex === 0) {
		return {
			rowspan: row.rowspan,
			colspan: 1
		}
	}
	//第二列
	if (columnIndex === 1) {
		return {
			rowspan: row.rowspan,
			colspan: 1
		}
	}
	//第三列
	if (columnIndex === 2) {
		return {
			rowspan: row.rowspan,
			colspan: 1
		}
	}
	//第四列
	if (columnIndex === 3) {
		return {
			rowspan: row.rowspan,
			colspan: 1
		}
	}
	//最后一列
	if (columnIndex === 18) {
		return {
			rowspan: row.rowspan,
			colspan: 1
		}
	}
}