elementUI中table单元格的合并，通用版

之前曾发布过一篇文章关于单元格合并问题，但是通用性很差，切代码较长不美观，改进之后分享给大家，我这里使用的是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 //上一行的合并数+1
                    spanArr.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 : 0
        return [_row, _col]
    }else{
        return [1, 1]
    }
}

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