element 合并单元格方法（精简版）

 直接上代码，这里举了个简单的例子

<div id="app">
        <el-table :data="tableData" style="width: 100%" border  :span-method="objectSpanMethod">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data () {
                return {
                    tableData:[
                        {date:'2023',name:'小明',address:'浙江杭州'},
                        {date:'2023',name:'小张',address:'浙江杭州'},
                        {date:'2024',name:'小a',address:'浙江杭州'},
                        {date:'2025',name:'小b',address:'浙江杭州'},
                        {date:'2025',name:'小c',address:'浙江杭州'},
                    ]
                }
            },
            mounted () {

            },
            methods: {
                // 获取需要合并的行
                getRow(data,item){
                    let pos = ''
                    let spanArr = []
                    for (var i = 0; i < data.length; i++) {
                        if (i === 0) {
                            spanArr.push(1);
                            pos = 0
                        } else {
                        // 判断当前元素与上一个元素是否相同
                            if (data[i][item] === data[i - 1][item]) {
                                spanArr[pos] += 1;
                                spanArr.push(0);
                            } else {
                                spanArr.push(1);
                                pos = i;
                            }
                        }
                    }
                    return spanArr
                },

                /// 合并单元格
                objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
                    // 第一列合并
                    if (columnIndex === 0) {
                        const _row = this.getRow(this.tableData,'date')[rowIndex]
                        const _col = _row > 0 ? 1 : 0
                        return {
                            rowspan:_row,
                            colspan:_col
                        }
                    }
                    // 第三列合并
                    // if(columnIndex === 2){
                    //     const _row = this.getRow(this.tableData,'address')[rowIndex]
                    //     const _col = _row > 0 ? 1 : 0
                    //     return {
                    //         rowspan:_row,
                    //         colspan:_col
                    //     }
                    // }
                },
            }
        })
    </script>

单元格合并主要用到了el-table的span-method属性，简单说明下使用方法，代码中的getRow方法是不需要动的，根据实际情况可能需要修改的地方只有if (columnIndex === 0) {...}里的判断条件，如果你要合并的参数在第一列，那么条件就是columnIndex === 0，在第二列就是columnIndex === 1，然后就是this.getRow的两个参数，第一个参数就是你的表单数据，第二个参数就是需要合并的项的变量名，其他参数均无需修改，一下是效果图。

如何有多列需要合并，只需要写多个if判断即可，例如上述中我注释掉的代码，对第三行地址进行了合并，去掉注释，效果如下。