el-table合并内容相同的表头、单元格,利用file-saver和XLSX纯前端导出多级表头表格,列宽根据内容长度动态设置，可直接复制

一架打字机

已于 2023-09-26 15:46:56 修改

阅读量924

点赞数 1

文章标签： vue.js elementui 前端前端框架 vscode

于 2023-09-26 15:46:07 首次发布

本文链接：https://blog.csdn.net/iseyre/article/details/133306469

版权

本文介绍如何在Vue.js项目中使用ElementUI实现el-table的表头和单元格合并，以及如何借助file-saver和XLSX库进行表格的导出，动态设置列宽，实现多级表头的Excel文件生成。

摘要由CSDN通过智能技术生成

合并

表头合并：el-table中加上这个方法

:header-cell-style="handerMethod"

方法：

// 合并表头这里合并的是2、3

handerMethod({ row, column, rowIndex, columnIndex }) {

console.log(row,'row');

if (row[1].level === 1) {

// 这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效

row[1].colSpan = 0

row[2].colSpan = 2

if (columnIndex === 1) {

return { display: 'none' }

}

}

},

单元格合并：和表头合并在同个位置加上这个方法： :span-method="genderSpanCity"

方法：

genderSpanCity({ row, column, rowIndex, columnIndex }) {

if (columnIndex === 0 || columnIndex === 1 ) {//第一列和第二列有相同的就合并

const cacheKey = `${rowIndex}-${columnIndex}`

if (this.cache[cacheKey]) {

return this.cache[cacheKey]

}

const currentValue = row[column.property]

const preRow = this.tableData[rowIndex - 1]

const preValue = preRow ? preRow[column.property] : null

if (currentValue === preValue) {

this.cache[cacheKey] = { rowspan: 0, colspan: 0 }

} else {

let rowspan = 1

for (l