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

这篇具有很好参考价值的文章主要介绍了elementUI中table单元格的合并，通用版。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

如图：合并前

elementui table 合并单元格,elementui,javascript,前端

想要效果：

elementui table 合并单元格,elementui,javascript,前端

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

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]
    }
}

是不是很通俗易懂，觉得好可以点个赞！！！文章来源地址https://www.toymoban.com/news/detail-612245.html

到了这里，关于elementUI中table单元格的合并，通用版的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！