element table表格根据同一个字段合并列（亲测有效，开箱即用~）

风掠过有空白

已于 2023-12-13 15:16:20 修改

阅读量171

点赞数

分类专栏：封装组件工作遇到的问题文章标签： vue.js elementui

于 2023-12-13 14:27:07 首次发布

本文链接：https://blog.csdn.net/weixin_44056717/article/details/134971330

版权

工作遇到的问题同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

封装组件

18 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中使用ElementUI的el-table组件实现数据行的合并，通过`getSpanArrList`方法根据指定的`storehouseId`字段判断行是否需要合并，以及`objectSpanMethod`方法来动态计算行span和列span。

摘要由CSDN通过智能技术生成

示图：

在这里插入图片描述

代码：

<el-table :data="tableData" border height="358px" :span-method="objectSpanMethod" style="width: 100%">
</el-table>



methods: {
//修改成需要合并的字段
        getSpanArrList(list,code) {
            if (list.length>0) {
                const spanArrList = []
                let totalNum = 0
                list.map((item, index) => {
                    if (index === 0) {
                        spanArrList.push(1)
                    } else {
                        //code是要合并的条件
                        if (item[code] === list[index - 1][code]) {
                            spanArrList[totalNum] += 1
                            spanArrList.push(0)
                        } else {
                            spanArrList.push(1)
                            totalNum = index
                        }
                    }
                })
                return { totalNumBer: spanArrList }
            }
        },
         //合并行
        objectSpanMethod({row, column, rowIndex, columnIndex}) {
            if (columnIndex === 0) {
                const rowSpanNum = this.getSpanArrList(this.tableData,'storehouseId').totalNumBer[rowIndex]
                const colSpanNum = rowSpanNum > 0 ? 1 : 0
                return {
                    rowspan: rowSpanNum,
                    colspan: colSpanNum,
                }
            }
        },


}