el-table 合并单元格

失眠的咕噜2025-01-12 15:45

参考文章：vue3.0 el-table 动态合并单元格 - flyComeOn - 博客园

html 复制代码

<el-table :data="tableData" border empty-text="暂无数据" :header-cell-style="{ background: '#f5f7fa' }" class="parent-table" :span-method="objectSpanMethod">

javascript 复制代码

getAll().then((rsp) => {
			if (rsp.status === HTTPStatus.OK) {
				tableData.value = rsp.data
				const colFields = ['groupNo', 'name', 'description', 'operation']
				setTableRowSpan(tableData.value, colFields)
			}
		})
		.catch(() => {})

// 设置合并的行和列
const setTableRowSpan = (tableData, colFields) => {
	let lastItem = []
	// 循环需要合并的列
	colFields.forEach((field, index) => {
		tableData.forEach((item) => {
			// 存值，把合并字段存入行，为了合并单元格时检索列是否含有该字段
			item.mergeCell = colFields
			// 合并的字段出现的次数
			const rowSpan = `rowspan_${field}`
			// 比较上一次的存值和该轮的合并字段，判断是否合并到上个单元格
			if (colFields.slice(0, index + 1).every((e) => lastItem[e] === item[e])) {
				// 如果是，合并行；
				item[rowSpan] = 0 // 该轮合并字段数量存0
				// 上轮合并字段数量+1
				lastItem[rowSpan] += 1
			} else {
				//初始化进入&& 如果不是，完成一次同类合并，lastItem重新赋值，进入下一次计算
				item[rowSpan] = 1 // 该轮合并字段第一次出现，数量存1
				// 改变比较对象，重新赋值，进行下一次计算
				lastItem = item
			}
		})
	})
}
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
	if (row.mergeCell.includes(column.property)) {
		const rowspan = row[`rowspan_${column.property}`]
		if (rowspan) {
			return { rowspan: rowspan, colspan: 1 }
		} else {
			return { rowspan: 0, colspan: 0 }
		}
	}
}