vxe-table多级表头，数据相同合并单元格

效果图：

以日期为基准进行单元格合并（el-table类似）

 <vxe-table ref="tableRef" :data="state.tableData" border :span-method="objectSpanMethod">
      <vxe-column type="checkbox" align="center" width="55"> </vxe-column>

      <vxe-column title="日期" align="center" width="200">
           <template #default="{row}">
               <div>
                  {{ row.inspection_date ? row.inspection_date : '---' }}
               </div>
           </template>
      </vxe-column>
       <!-- 多级表头 -->
      <vxe-colgroup title="任务要求" align="center">
            <vxe-column title="岗位" align="center" field="creator" min-width="120">
                <template #default="scope">
                    <div>{{ scope.row.position }}</div>
                </template>
             </vxe-column>
             <vxe-column title="巡查人" align="center" field="creator" width="120">
                 <template #default="scope">
                     <div>{{ scope.row.creator }}</div>
                 </template>
             </vxe-column>
             <vxe-column title="巡查要求" align="center" min-width="180">
                  <template #default="{ row }">
                     <div block>{{ getRuleText(row) }}</div>
                        </template> 
             </vxe-column>
      </vxe-colgroup>
 </vxe-table>

const state = reactive({
   tableData: [
        {id:1, inspection_date:'2024年06月21日', position:'专业监理工程师', creator:'张三', creator_id:10599, time_difference:100},
        {id:2, inspection_date:'2024年06月21日', position:'专业监理工程师', creator:'张三', creator_id:10599, time_difference:200},
        {id:3, inspection_date:'2024年06月21日', position:'总监理工程师', creator:'李四', creator_id:10575, time_difference:300}
    ]
})


// 合并单元格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
    if (column.level === 1 && columnIndex === 1) {
       return getRowspanAndColspan(rowIndex, 'inspection_date', row.inspection_date);
    }

    if (column.level === 2) {
        if (columnIndex === 0 && column.title === '岗位') {
            return getRowspanAndColspan(rowIndex, 'position', row.position);
        } else if (columnIndex === 1 && column.title === '巡查人') {
            return getRowspanAndColspan(rowIndex, 'creator', row.creator);
        }
    }

    return { rowspan: 1, colspan: 1 };
}


const getRowspanAndColspan = (rowIndex: number, key: string, value: any) => {
    if (rowIndex > 0 && value === state.tableData[rowIndex - 1][key]) {
        return { rowspan: 0, colspan: 0 };
    } else {
        let rowspan = 1;
        for (let i = rowIndex + 1; i < state.tableData.length; i++) {
            if (state.tableData[i][key] === value) rowspan++;
            else break;
        }
        return { rowspan, colspan: 1 };
    }
}