根据配置生成一个合并单元格的table表格的html代码

分享最近工作中遇到的一个场景：导出表格，需要准备好表格的html代码，此表格支持最上面的表头合并且居中展示表格标题，如果上下行数据有相同的，则要上下合并单元格

封装了一个如下的方法

const configToTable = (config)=> {const { columns = [], data = [], mergeColumns = [], title = '' } = configlet html = '<table border><thead>'if (title) {const colSpan = columns.lengthhtml += `<tr><th colspan="${colSpan}">${title}</th></tr>`}html += '<tr>'columns.forEach((column) => {html += `<th>${column.text}</th>`})html += '</tr></thead><tbody>'if (!data.length) {html += `<tr><td colspan="${columns.length}">暂无数据</td></tr>`} else {data.forEach((item) => {html += '<tr>'columns.forEach((column) => {html += `<td class=${column.className} style=${column.style}>${item[column.prop]}</td>`})html += '</tr>'})}html += `</tbody></table>`if (!mergeColumns.length) return html// 如果无需合并单元格，就不用进行以下的操作const tempDiv = document.createElement('div')tempDiv.innerHTML = htmlconst table = tempDiv.querySelector('table')const tbody = table.querySelector('tbody')mergeColumns.forEach((column) => {const colIndex = columns.findIndex((item) => item.prop === column)let lastValue = ''let lastTd= {}let spanCount = 1Array.from(tbody.rows).forEach((row) => {const cell = row.cells[colIndex]if(cell.textContent === lastValue) {spanCount++lastTd.rowSpan = spanCountcell.setAttribute('data-remove', 'true')}else {lastValue = cell.textContentlastTd = cellspanCount = 1}})})Array.from(tbody.rows).forEach(row => {Array.from(row.cells).forEach(cell => {if(cell.getAttribute('data-remove') === 'true') {cell.parentNode?.removeChild(cell)}})})return tempDiv.innerHTML
}

示例：
准备好参数：

const tableConfig = {columns: [{text: '姓名',prop: 'name',className: 'name',style: 'width: 200px'},{text: '年龄',prop: 'age',className: 'age',style: 'width: 200px'},{text: '性别',prop:'sex',className:'sex',style: 'width: 200px'},{text: '地址',prop: 'address',className: 'address',style: 'width: 200px'}],data: [{name: '张三',age: 18,sex: '男',address: '深圳'},{name: '李四',age: 18,sex: '女',address: '深圳'},{name: '王五',age: 20,sex: '男',address: '深圳'}],title: '测试',mergeColumns: ['address', 'age']
}