el-table 合并指定列

自定义合并列 实测好用

 <el-table :data="tableData" border :span-method="objectSpanMethod">
 	<el-table-column prop="date" label="年月份" width="100" align="center"></el-table-column>
	<el-table-column prop="operatorName" label="负责人" align="center"></el-table-column>
	<el-table-column prop="object" label="目标" align="center"></el-table-column>
	<el-table-column prop="serviceName" label="服务对象" align="center"></el-table-column>
</el-table>
<script>
	data(){
		return {
			tableData:[],
			needMergeArr:["date","operatorName","object"], // 需要合并列的字段 必须要和tableData中字段值一致
            rowMergeArrs: [],
		}
	}
	methods:{
		getList(){
            this.$api.get({
                ...
            }).then(res =>{
                if(res.code == '200'){
                    this.tableData = res.data;
                    this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
                }else{
                    this.$message.error(res.msg);
                }
            })
        },
		objectSpanMethod({row,column,rowIndex,columnIndex}) {
            for(let res in this.needMergeArr){
                if(this.needMergeArr[res] == column.property){
                    return this.mergeAction(column.property, rowIndex, columnIndex);
                }
            }
        },
        mergeAction(val, rowIndex) {
            if(!this.rowMergeArrs[val]) return;
            let _row = this.rowMergeArrs[val].rowArr[rowIndex];
            let _col = _row > 0 ? 1 : 0;
            return [_row, _col];
        },
        rowMergeHandle(arr, data) {
            if (!Array.isArray(arr) && !arr.length) return false;
            if (!Array.isArray(data) && !data.length) return false;
            let needMerge = {};
            arr.forEach((i, idx) => {
                needMerge[i] = {
                    rowArr: [],
                    rowMergeNum: 0,
                };
                if (idx == 0) {
                    data.forEach((item, index) => {
                        // 表格首个数据单独处理
                        if (index === 0) {
                            needMerge[i].rowArr.push(1);
                            needMerge[i].rowMergeNum = 0;
                        } else {
                            if (item[i] === data[index - 1][i]) {
                                needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                                needMerge[i].rowArr.push(0);
                            } else {
                                needMerge[i].rowArr.push(1);
                                needMerge[i].rowMergeNum = index;
                            }
                        }
                    });
                } else {
                    let firstRowArr = needMerge[arr[0]].rowArr;
                    let firstRowArrDeal = [];
                    firstRowArr.forEach((item, index) => {
                        if (item > 0) {
                        firstRowArrDeal.push(index);
                        }
                    });
                    data.forEach((item, index) => {
                        let sign = false;
                        if (firstRowArrDeal.indexOf(index) > 0) {
                            needMerge[i].rowMergeNum = index;
                            sign = true;
                        }
                        // 表格首个数据单独处理
                        if (index === 0) {
                            needMerge[i].rowArr.push(1);
                            needMerge[i].rowMergeNum = 0;
                        } else {
                            if (item[i] === data[index - 1][i]) {
                                if (sign) {
                                    needMerge[i].rowArr.push(1);
                                } else {
                                    needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                                    needMerge[i].rowArr.push(0);
                                }
                            } else {
                                needMerge[i].rowArr.push(1);
                                needMerge[i].rowMergeNum = index;
                            }
                        }
                    });
                }
            });
            return needMerge;
        }
	}
</script>