<el-table ref="tableList" :data="tableData" :span-method="arraySpanMethod" ></el-table>
自定义span-method方法达到合并表格目的
getSpanArr方法 重置tableData数据格式
arraySpanMethod 合并方法
cellClassName 定义单元格类名
tempList 储存添加过的字段
getSpanArr() {
let newTabelData=[]
for (let index = 0; index < this.tableData.length; index++) {
const element = this.tableData[index];
for (let grindIndex = 0; grindIndex < (element.grindsStones.length||1); grindIndex++) {
const grindElement = element.grindsStones[grindIndex]||{steelInfos:[]};
for (let steelIndex = 0; steelIndex < (grindElement.steelInfos.length||1); steelIndex++) {
const steelElement = grindElement.steelInfos[steelIndex]||{};
let obj={
objectId:element.objectId||'',
deviceCode:element.deviceCode||'',
deviceName:element.deviceName||'',
deviceRowspan:element.rowSpan,
name:grindElement.name||'',
code:grindElement.code||'',
nameRowspan:grindElement.rowSpan,
gyscj:grindElement.gyscj||'',
slld:grindElement.slld||'',
sysl:grindElement.sysl||'',
steelName:steelElement.steelName||'',
steelCode:steelElement.steelCode||'',
steelRowspan:steelElement.rowSpan,
formatSteelWeight:steelElement.formatSteelWeight||'',
formatConversionWeight:steelElement.formatConversionWeight||'',
formatSandingWeight:steelElement.formatSandingWeight||'',
formatSandingArea:steelElement.formatSandingArea||''
}
newTabelData.push(obj)
}
}
}
this.tableData=newTabelData
this.$nextTick(() => {
tempList=[]
this.$refs.tableList.doLayout()
})
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
let deviceCode=row.deviceCode
let objectId=row.objectId
let deviceName=row.deviceName
let code=objectId+row.code
//按数组顺序取值拼接保证每一行数据不重复
let name='name'+objectId+code+row.name
let gyscj='gyscj'+objectId+code+row.gyscj
let slld='slld'+objectId+code+row.slld
let sysl='sysl'+objectId+code+row.sysl
let len=tempList.filter((item)=>{return item==deviceCode}).length
let lendeviceName=tempList.filter((item)=>{return item==deviceName}).length
let lenname=tempList.filter((item)=>{return item==name}).length
let lengyscj=tempList.filter((item)=>{return item==gyscj}).length
let lenslld=tempList.filter((item)=>{return item==slld}).length
let lensysl=tempList.filter((item)=>{return item==sysl}).length
if(columnIndex==0&&rowIndex==this.tableData.length-1){
// 第一列 最后一行 合计 合并
return {
rowspan: 1,
colspan: 5
};
}else if(rowIndex==this.tableData.length-1&&columnIndex<5){
//最后一行 被合计 合并的设置0,0
return {
rowspan: 0,
colspan: 0
};
}else{
if(columnIndex==0&&len==0){
//第一列 首次 合并列数
tempList.push(deviceCode)
return {
rowspan: row.deviceRowspan,
colspan: 1
};
}else if(columnIndex==0&&len<row.deviceRowspan){
//第一列 合并列之外归零
tempList.push(deviceCode)
return {
rowspan: 0,
colspan: 0
};
}
if(columnIndex==1&&lendeviceName==0){//第二列 合并
tempList.push(deviceName)
return {
rowspan: row.deviceRowspan,
colspan: 1
};
}else if(columnIndex==1&&lendeviceName<row.deviceRowspan){
tempList.push(deviceName)
return {
rowspan: 0,
colspan: 0
};
}
if(columnIndex==2&&lenname==0){
tempList.push(name)
return {
rowspan: row.nameRowspan,
colspan: 1
};
}else if(columnIndex==2&&lenname<row.nameRowspan){
tempList.push(name)
return {
rowspan: 0,
colspan: 0
};
}
if(columnIndex==3&&lengyscj==0){
tempList.push(gyscj)
return {
rowspan: row.nameRowspan,
colspan: 1
};
}else if(columnIndex==3&&lengyscj<row.nameRowspan){
tempList.push(gyscj)
return {
rowspan: 0,
colspan: 0
};
}
if(columnIndex==4&&lenslld==0){
tempList.push(slld)
return {
rowspan: row.nameRowspan,
colspan: 1
};
}else if(columnIndex==4&&lenslld<row.nameRowspan){
tempList.push(slld)
return {
rowspan: 0,
colspan: 0
};
}
if(columnIndex==5&&lensysl==0){
tempList.push(sysl)
return {
rowspan: row.nameRowspan,
colspan: 1
};
}else if(columnIndex==5&&lensysl<row.nameRowspan){
tempList.push(sysl)
return {
rowspan: 0,
colspan: 0
};
}
}
},
cellClassName({ row, column, rowIndex, columnIndex }){
if(row.deviceCode=='合计'){
return 'emptyClassColor'
}
if(columnIndex >5&&row.steelName=='合计'){
return 'emptyClass'
}
},
文档表格导出方法
exportList() {
//导出表头信息
let excelArr = [
["设备编号",
"设备名称",
"砂轮种类",
"厂家",
"粒度",
"数量(片)",
"钢种名称",
"产量(吨)",
"折算重量(吨)",
"磨削量(吨)",
"修磨面积(m²)"
]
];
let mergeArr=[],tempLIst=[];//合并数组 储存合并值
this.tableData.forEach((item,rowIndex) => {
//对应字典值
excelArr.push([
item.deviceCode,
item.deviceName,
item.name,
item.gyscj,
item.slld,
item.sysl,
item.steelName,
item.formatSteelWeight,
item.formatConversionWeight,
item.formatSandingWeight,
item.formatSandingArea,
]);
if(!tempLIst.includes('objectId'+item.objectId)){
// 未包含 添加id 合并开始
tempLIst.push('objectId'+item.objectId)
if(item.deviceCode=='合计'){
mergeArr.push({ s: { r: rowIndex+1, c: 0 }, e: { r: (rowIndex+1), c: 4 } })
}else{
mergeArr.push({ s: { r: rowIndex+1, c: 0 }, e: { r: (rowIndex+item.deviceRowspan), c: 0 } })
mergeArr.push({ s: { r: rowIndex+1, c: 1 }, e: { r: (rowIndex+item.deviceRowspan), c: 1 } })
}
}
if(!tempLIst.includes('name'+item.objectId+item.code+item.name)&&item.deviceCode!=='合计'){
tempLIst.push('name'+item.objectId+item.code+item.name)
mergeArr.push({ s: { r: rowIndex+1, c: 2 }, e: { r: (rowIndex+item.nameRowspan), c: 2 } })
mergeArr.push({ s: { r: rowIndex+1, c: 3 }, e: { r: (rowIndex+item.nameRowspan), c: 3 } })
mergeArr.push({ s: { r: rowIndex+1, c: 4 }, e: { r: (rowIndex+item.nameRowspan), c: 4 } })
mergeArr.push({ s: { r: rowIndex+1, c: 5 }, e: { r: (rowIndex+item.nameRowspan), c: 5 } })
}
});
this.$outputXlsxFile(
excelArr,
[
{wch: 30},
{wch: 30},
{wch: 30},
{wch: 30},
{wch: 15},
{wch: 10},
{wch: 10},
{wch: 15},
{wch: 15},
{wch: 15},
{wch: 15},
],
"耗材统计",
mergeArr
);
},
main.js中配置 xlsx导出配置
import XLSX from 'xlsx'
const outputXlsxFile = (data, wscols, xlsxName) => {
/* convert state to workbook */
const ws = XLSX.utils.aoa_to_sheet(data);
ws['!cols'] = wscols;
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, xlsxName);
/* generate file and send to client */
XLSX.writeFile(wb, xlsxName + ".xlsx");
}
Vue.prototype.$outputXlsxFile = outputXlsxFile;