element封装表格合并行函数（支持指定列、同时满足多个字段才合并、空值不合并）

话不多说，先上全部代码~

<el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod">
    <el-table-column prop="quarter" label="季度" align="center" />
    <el-table-column prop="department" label="部门" align="center" />
    <el-table-column prop="Name" label="姓名" align="center" />
    <el-table-column prop="sale" label="销售额" align="center" />
</el-table>

<script>
export default {
    name: "Order",
    data() {
        return {
            spanMap: {},    // 合并单元格所需数据
            tableData: [
                {
                    quarter: "第一季度",
                    department: "销售部",
                    name: "张三",
                    sale: "9000",
                    clothes: {
                        type: 'hat'
                    }
                },
                {
                    quarter: "第一季度",
                    department: "销售部",
                    name: "李四",
                    sale: "6542",
                    clothes: {
                        type: 'hat'
                    }
                },
                {
                    quarter: "第一季度",
                    department: "技术部",
                    name: "王五",
                    sale: "7900",
                    clothes: {
                        type: 'hat'
                    }
                },
                {
                    quarter: "第二季度",
                    department: "技术部",
                    name: "赵六",
                    sale: "5487",
                    clothes: {
                        type: 'hat'
                    }
                },
                {
                    quarter: "第二季度",
                    department: "产品部",
                    name: "钱八",
                    sale: "9000",
                    clothes: {
                        type: 'hat'
                    }
                },
                {
                    quarter: "第二季度",
                    department: "产品部",
                    name: "陈九",
                    sale: "",
                    clothes: {
                        type: 'hat'
                    }
                },
                {
                    quarter: "第三季度",
                    department: "人事部",
                    name: "小亮",
                    sale: "",
                    clothes: {
                        type: 'hat'
                    }
                },
                {
                    quarter: "第三季度",
                    department: "人事部",
                    name: "小明",
                    sale: "7900",
                    clothes: {
                        type: 'hat'
                    }
                },
                {
                    quarter: "第三季度",
                    department: "销售部",
                    name: "李华",
                    sale: "7900",
                    clothes: {
                        type: 'hat'
                    }
                }
            ]
        }
    },
    created() {
        this.getSpanArr(this.tableData, ['quarter', 'department,quarter'])
    },
    methods: {
        getSpanArr(data, mergeField = [], ) {
            if (!mergeField.length) {
                return
            }
            for (let i = 0; i < data.length; i++) {
                if (i === 0) {
                    // 对于第一个元素，初始化每个指定的合并字段在spanMap对象中的信息
                    mergeField.forEach(column => {
                        const item = column.split(',')
                        const key = item[0].split('.')[0]
                        this.spanMap[key] = {
                            spanArr: [1], // spanArr用于存储连续元素的数量，初始值为1，因为至少有一个连续元素
                            pos: 0 // pos表示当前处理的连续元素的位置
                        }
                    });
                } else {
                    // 对于后续元素，逐个处理指定的合并字段
                    mergeField.forEach(column => {
                        const columnArr = column.split(',')
                        const key = columnArr[0].split('.')[0]
                        const res = columnArr.every(item => {
                            // 空值不合并
                            if (data[i][item] === '' || data[i - 1][item] === '') {
                                return false
                            }

                            return data[i][item] === data[i - 1][item]
                        })
                        if (res) {
                            // 如果当前元素的指定字段与前一个元素的指定字段相同，表示可以合并
                            // 则增加spanArr中对应字段的位置处的值，并将0添加到spanArr表示有另一个连续元素
                            this.spanMap[key].spanArr[this.spanMap[key].pos] += 1;
                            this.spanMap[key].spanArr.push(0);
                        } else {
                            // 如果当前元素的指定字段与前一个元素的指定字段不同，表示连续序列中断
                            // 则将1添加到spanArr表示开始了一个新的连续元素序列，并更新pos为当前位置
                            this.spanMap[key].spanArr.push(1);
                            this.spanMap[key].pos = i;
                        }
                    });
                }
            }
            // 输出计算得到的spanMap对象，用于调试和查看结果
            console.log(this.spanMap, 'spanMap');
        },
        objectSpanMethod({ column, rowIndex }) {
            if (this.spanMap[column.property]) {
                const rowspan = this.spanMap[column.property].spanArr[rowIndex];
                const colspan = rowspan > 0 ? 1 : 0;
                return {
                    rowspan,
                    colspan
                }
            }
        }
    },
};
</script>

核心部分就是getSpanArr函数，该函数作用是获取合并单元格所需参数，它会传入两个参数，第一个参数就是表格数据，第二个参数是指定合并行的数组，可支持多个，例如：

this.getSpanArr(this.tableData, ['quarter', 'department'])

效果如下：

但是这里会有个问题，技术部这里因为所属不同季度，不想让它合并怎么办？ 这里就可以通过数组里单个元素配置多个字段，用逗号隔开就可以了。含义是第一个是需要合并的字段，后面是需要同时满足条件的字段才会合并，例如：['quarter', 'department,quarter']，department就是需要合并的字段，但是前提条件是quarter字段也符合才会合并。当然也可以不止两个哦~

下面是一个例子

this.getSpanArr(this.tableData, ['quarter', 'department,quarter'])

效果图

如果表格数据某一项的字段是对象，也可以像下面这样使用 

this.getSpanArr(this.tableData, ['clothes.type'])

如果对你有帮助，麻烦给点个赞吧~