先上完成的效果图：列是根据查询结果增加的

数据格式：

表头的数据取出：

data.data.forEach(元素={这个。thead。推送({ 0品名：元素。品名，面取数：元素。面取数，LOTNO:元素. LOT })；元素表中：

El-table-列v-for='(项目，索引)在ad' :prop='项目中LOTNO ' :键=' index ' align=' center ' width=' 180 '模板slot=' header ' tr TD { { item } .品名}}/td /tr tr td{{item .面取数} }/TD/tr/tr TD @ click=' querylot(项.链接{ { item } } .LOTNO } }/El-link/TD/tr/template/El-table-column表格内数据整理：

用于(让索引1=3；索引一对象。键（结果_数据[0]).长度；索引1){ 0让新地图=新地图()；让数据键=对象键（结果_ data[0])[index 1]；newmap.set('mode '，数据键)；//取出每个数组对象的键值用于(让索引2=0；指数2结果_数据_长度；index2 ) { let datavalue=结果_数据[索引2][对象。键（结果_ data[0])[索引1]]；if (datakey=='投入日期){ datavalue=datavalue.slice(0，10)；} newmap.set(结果_数据[索引2][对象。键（结果_data[index2])[0]]，数据值)；//获得这个键对应的所有的值}左侧表头合并：需要注意的是，当有固定列的时候需要设置表格的最大高度属性，不然会出现列空白

El-table : data=' table data ' span-method=' object span method ' object span method({ row，column index }，column index }==0){ if(row index % this。表格数据。length===0){ return { row span : this。表格数据。长度，col span : 1 }；} else { return { rowspan: 0，col span : 0 }；} } }表格导出：

从"文件保存程序"导入文件保存程序；从“XLSX”导入XLSXoutput(){ alert(1)；让WB=xlsx。utils。表到书(文档。query selector(' # my table ')；//mytable为表格的编号名let wbout=XLSX.write(wb，{ bookType: 'xlsx '，bookSST: true，type : ' array ' })；请尝试{ FileSaver.saveAs(新Blob([wbout]，{ type : ' application/octet-stream ' })，' sheet。xlsx’)；} catch (e) { if(控制台类型！=='undefined') console.log(e，wbout)；}返回wbout}总结

以上所述是小编给大家介绍的Vue elementui实现复杂表头和动态增加列的二维表格功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！