之前曾发布过一篇文章关于单元格合并问题，但是通用性很差，切代码较长不美观，改进之后分享给大家，我这里使用的是vue3,vue2的小伙伴稍微改动一下即可

如图：合并前

 想要效果：

 话不多说直接上代码教大家！！！

1.定义两个变量

let spanArr = reactive([]) //记录合并的数组
let position = ref(0) //合并会用到的索引

2.定义编写合并逻辑的方法

const mergeTable = (spanName,tableData) => {spanName.forEach((arr) => {tableData.map((data, index)=> {//当前为第一行的时候if(index === 0){spanArr.push(1),position.value = 0}else{// 如果说当前行与上一行是相同的数据if(tableData[index][spanName] === tableData[index-1][spanName]){spanArr[position.value] += 1 //上一行的合并数+1spanArr.push(0) //当前行的合并数是0}else{// 如果说当前行与上一行不相同  那么两个都不进行合并所以返回1，索引变成当前行索引spanArr.push(1)position.value = index}}})})
}

3.调用

// 参数1：合并的表格列名，你需要传入一个数组，如果你写的不是数组，则方法中的第一个循环要去除
// 餐数2：表格的数据源
mergeTable(['date'],tableData)

4.使用elementUI中合并的方法

// 合并表格数据
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {if(columnIndex === 0){const _row = spanArr[rowIndex]const _col = _row > 0 ? 1 : 0return [_row, _col]}else{return [1, 1]}
}

是不是很通俗易懂，觉得好可以点个赞！！！