el-table 合并单元格公共的方法支持指定列合并

<el-table
        ref="refs"
        :span-method="objectSpanMethod "
        :data="data"
      ></el-table>

export default{
    data(){
          return {
                  data:[],
                  spanMethodList:["name","num"]
          }
    },
    methods:{
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        //rowspan=1&&colspan=1显示不合并  rowspan=0&&colspan=0 隐藏 rowspan合并几行 colspan合并几列
        var list = this.spanMethodList;//需要合并的列
        if(list&&list.length>0&&list.join(",").indexOf(column.property)>-1){
            const data = this.getMethod(rowIndex,column.property);
            //data 存在即合并单元格或隐藏单元格 ，data不存在显示单元格
            if(data){
                return data;
            }else{
                return {
                    rowspan:1,
                    colspan:1
                }
            }
        }
    },
    //计算合并单元格和隐藏的单元格
    getMethod(rowIndex,prop){
        let list = [],value='',rowspan = 1,rowspanIndex=0;
        this.data.map((e,index)=>{
            if(value&&value == e[prop]){
                rowspan++;
                if(index==this.dataArr.length-1){
                    if(rowspan>1){
                        list.push({
                            rowspanIndex:rowspanIndex,
                            list:{
                                rowspan:rowspan,
                                colspan:1
                            }
                        })
                        // 当最后一个单元格为合并状态  需要隐藏最后一个单元格
                        if(rowspanIndex!=index){
                            list.push({
                                rowspanIndex:index,
                                list:{
                                    rowspan:0,
                                    colspan:0
                                }
                            })
                        }
                    }
                }else{
                    //合并的单元格隐藏
                    list.push({
                        rowspanIndex:index,
                        list:{
                            rowspan:0,
                            colspan:0
                        }
                    })
                }
            }else{
                value = e[prop];
                if(index==this.dataArr.length-1){
                    list.push({
                        rowspanIndex:rowspanIndex,
                        list:{
                            rowspan:rowspan,
                            colspan:1
                        }
                    })
                }else{
                    if(rowspan>1){
                        list.push({
                            rowspanIndex:rowspanIndex,
                            list:{
                                rowspan:rowspan,
                                colspan:1
                            }
                        })
                    }
                }
                rowspan = 1;
                rowspanIndex = index;//第几行
            }
        })
        var filter = list.filter((e)=>{
            return e.rowspanIndex == rowIndex;
        })
        if(filter[0]){
            return filter[0].list
        }else{
            return "";
        }
    }
    }
}

效果图

1698223173206.png