如何将vue3项目下的el-table表格导出到 excel 并保留样式和数据的展现形式？-灵析社区

需求是要将 图示的表格 导出到excel中 并且展现形式和样式要一致 请问有什么方法实现吗, 下面时表格实现的代码 江苏明卓加工情况 const rowClassName = ({row}) => { if(row.col2 === '合计') { return 'totalRowClass' } else { return '' } } const tableData = [ { col1: "2016-05-03", col2: "Tom", col3: "California1", col4: "1", col5: "No. 189", col6: "CA 900361", col7: "CA 9003611", col8: "CA 9003611", col9: "CA 9003611", col10: "CA 9003611", col11: "CA 9003611", col12: "CA 9003611", col13: "CA 9003611", }, { col1: "2016-05-03", col2: "Tom", col3: "California2", col4: "2", col5: "No. 189", col6: "CA 90036", col7: "CA 9003611", col8: "CA 9003611", col9: "CA 9003611", col10: "CA 9003611", col11: "CA 9003611", col12: "CA 9003611", col13: "CA 9003611", }, { col1: "2016-05-03", col2: "Tom", col3: "California3", col4: "Los Angeles3", col5: "No. 189", col6: "CA 90036", col7: "CA 9003611", col8: "CA 9003611", col9: "CA 9003611", col10: "CA 9003611", col11: "CA 9003611", col12: "CA 9003611", col13: "CA 9003611", }, { col1: "2016-05-03", col2: "合计", col3: "", col4: "", col5: "", col6: "", col7: "10", col8: "28", col9: "100", col10: "", col11: "", col12: "", col13: "", }, { col1: "2017-05-03", col2: "Tom2", col3: "Californiaq", col4: "Los Angeles", col5: "No. 189", col6: "CA 90036", col7: "CA 9003611", col8: "CA 9003611", col9: "CA 9003611", col10: "CA 9003611", col11: "CA 9003611", col12: "CA 9003611", col13: "CA 9003611", }, { col1: "2017-05-03", col2: "Tom2", col3: "Californiaq", col4: "Los Angeles", col5: "No. 189", col6: "CA 90036", col7: "CA 9003611", col8: "CA 9003611", col9: "CA 9003611", col10: "CA 9003611", col11: "CA 9003611", col12: "CA 9003611", col13: "CA 9003611", }, { col1: "2017-05-03", col2: "Tom2", col3: "Californiat", col4: "Los Angeles", col5: "No. 189", col6: "CA 90036", col7: "CA 9003611", col8: "CA 9003611", col9: "CA 9003611", col10: "CA 9003611", col11: "CA 9003611", col12: "CA 9003611", col13: "CA 9003611", }, { col1: "2017-05-03", col2: "合计", col3: "", col4: "", col5: "", col6: "", col7: "10", col8: "28", col9: "100", col10: "", col11: "", col12: "", col13: "", }, { col1: "2018-05-03", col2: "Tom", col3: "California6", col4: "Los Angeles", col5: "No. 189", col6: "CA 90036", col7: "CA 9003611", col8: "CA 9003611", col9: "CA 9003611", col10: "CA 9003611", col11: "CA 9003611", col12: "CA 9003611", col13: "CA 9003611", }, { col1: "2018-05-03", col2: "Tom", col3: "California7", col4: "Los Angeles", col5: "No. 189", col6: "CA 90036", col7: "CA 9003611", col8: "CA 9003611", col9: "CA 9003611", col10: "CA 9003611", col11: "CA 9003611", col12: "CA 9003611", col13: "CA 9003611", }, { col1: "2018-05-03", col2: "Tom", col3: "California8", col4: "Los Angeles", col5: "No. 189", col6: "CA 90036", col7: "CA 9003611", col8: "CA 9003611", col9: "CA 9003611", col10: "CA 9003611", col11: "CA 9003611", col12: "CA 9003611", col13: "CA 9003611", }, { col1: "2018-05-03", col2: "合计", col3: "", col4: "", col5: "", col6: "", col7: "10", col8: "28", col9: "100", col10: "", col11: "", col12: "", col13: "", }, { col1: "日产量", col2: "油膜机组(平方)", col3: "", col4: "", col5: "", col6: "", col7: "", col8: "激光+坡口(米)", col9: "", col10: "", col11: "", col12: "", col13: "", }, { col1: "生产金额", col2: " ", col3: "", col4: "", col5: "", col6: "", col7: "", col8: "", col9: "", col10: "", col11: "", col12: "", col13: "", }, { col1: "累计生产金额", col2: " ", col3: "", col4: "", col5: "", col6: "", col7: "", col8: "", col9: "", col10: "", col11: "", col12: "", col13: "", } ]; // 合并行 const arraySpanMethod = ({ row, column, rowIndex, columnIndex, }) => { // 列合并 if(['生产金额', '累计生产金额'].includes(row.col1)) { if (columnIndex === 0) { return [1, 1] } else { return { rowspan: 1, colspan: tableData.length - 1 } } } if(['日产量'].includes(row.col1)) { if([0, 1, 7].includes(columnIndex)) { return [1, 1] } else if([2, 8].includes(columnIndex)) { return [1, 5] } else { return [0, 0] } } // 行合并 if (['col1'].includes(column.property)) { if(rowIndex > 0 && row.col1 === tableData[rowIndex - 1].col1) { return { rowspan: 0, colspan: 0 } } else { let rowspan = 1 for(let i = rowIndex + 1; i 0 && row.col2 === tableData[rowIndex - 1].col2) { return { rowspan: 0, colspan: 0 } } else { let rowspan = 1 for(let i = rowIndex + 1; i .totalRowClass { color: red; font-weight: bold; .el-table__cell { background-color: #e9e907 !important; } } .dailyReport { thead.is-group th.el-table__cell{ color: black; } }