1、el-table中添加事件 :span-method="genderSpanCity"
<el-table :span-method="genderSpanCity"
:data="data.tableData"
:fit="true" table-layout="fixed" header-align="center" stripe
style="width:100%;height: 96%;"
:cell-style="{borderColor:'#aaa'}"
:header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9',height:'50px'}"
v-else>
<el-table-column :label="$t('wms.dailyProduct')" align="center" height="70px">
<el-table-column>
<el-table-column prop="process" :label="$t('mes.workingProcedure')" width="100" align="center"/>
<el-table-column prop="item" width="130"/>
<el-table-column prop="item2" width="150"/>
</el-table-column>
<!--二级标题日期-->
<el-table-column v-for="(name,index) in data.title" :key="name" :label="name" align="center">
<!-- 三级标题-->
<el-table-column v-for="column in data.tableColumns" :key="column.prop"
:prop="column.prop"
:label="column.label" align="center">
<template #default="scope">
{
{ scope.row.custom.length > 0 ? scope.row.custom[index][column.prop] : scope.row.custom[column.prop] }}
</template>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
2、js添加函数
// 合并列
const genderSpanCity = ({
row,
column,
rowIndex,
columnIndex
}) => {
// 合并前4行的2列与3列
for (let i = 0; i < 13; i++) {
if (columnIndex === 1 && rowIndex === i) {
return {
rowspan: 1,
colspan: 2
}
} else if (columnIndex === 2 && rowIndex === i) {
return {
rowspan: 0,
colspan: 0
}
}
}
// 合并第4行以后的数据
for (let i = 4; i < data.tableData.length; i++) {
if (columnIndex > 3 && columnIndex % 2 === 0 && rowIndex === i) {
return [1, 3]
} else if (columnIndex >= 3 && columnIndex % 2 === 1 && rowIndex === i) {
return [0, 0]
}
}
// 合并前两列的数据
if (columnIndex === 0 || columnIndex === 1) {
// 获取当前单元格的值
const currentValue = row[column.property]
// 获取上一行相同列的值
const preRow = data.tableData[rowIndex - 1]
const preValue = preRow ? preRow[column.property] : null
// 如果当前值和上一行的值相同，则将当前单元格隐藏
if (currentValue === preValue) {
return {
rowspan: 0,
colspan: 0
}
} else {
// 否则计算当前单元格应该跨越多少行
let rowspan = 1
for (let i = rowIndex + 1; i < data.tableData.length; i++) {
const nextRow = data.tableData[i]
const nextValue = nextRow[column.property]
if (nextValue === currentValue) {
rowspan++
} else {
break
}
}
return {
rowspan,
colspan: 1
}
}
}
}
效果图为
3、数据格式参考：
const data = reactive({
// tableData: [
// {
// process: '混料',
// item: '11CAAF02/碳酸钙',
// item2: '11CAAF02/碳酸钙',
// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
// }, {
// process: '混料',
// item: '11PVAF03/5型树脂',
// item2: '11PVAF03/5型树脂',
// custom: '{"本周/This Week": 1 }'
// }, {
// process: '混料',
// item: '11PVAF04/7型树脂',
// item2: '11PVAF04/7型树脂',
// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
// }, {
// process: '混料',
// item: '4330AF01/回料',
// item2: '4330AF01/回料',
// custom: '{"本周/This Week": 1 }'
// },
// {
// process: '挤出',
// item: '产出总托数',
// item2: '产出总托数',
// custom: '{"本周/This Week": 1 }'
// }, {
// process: '挤出',
// item: 'RGV调度次数',
// item2: 'RGV调度次数',
// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
// }, {
// process: '挤出',
// item: 'ng板数量',
// item2: 'ng板数量',
// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
// }, {
// process: '挤出',
// item: '养生区ng板数量',
// item2: '养生区ng板数量',
// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
// },
// {
// process: '',
// item: '',
// item2: '',
// custom: ''
// }, {
// process: '贴合',
// item: '发泡板',
// item2: '投料记录',
// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
// }, {
// process: '贴合',
// item: '发泡板',
// item2: 'RGV调度次数',
// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
// }, {
// process: '贴合',
// item: '上基材',
// item2: '投料记录',
// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
// }, {
// process: '贴合',
// item: '上基材',
// item2: '上料扫码次数',
// custom: '{"本周/This Week": 1}'
// }, {
// process: '贴合',
// item: '码垛',
// item2: '产出记录',
// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
// }, {
// process: '贴合',
// item: '码垛',
// item2: 'RGV调度次数',
// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
// }, {
// process: '贴合',
// item: '汇总数量',
// item2: '发泡板',
// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
// }, {
// process: '贴合',
// item: '汇总数量',
// item2: '上基材',
// custom: '{"本周/This Week": 1}'
// },
// {
// process: '',
// item: '',
// item2: '',
// custom: ''
// }, {
// process: '锯开检',
// item: '贴合大张',
// item2: '投料记录',
// custom: '{"本周/This Week": 1}'
// }, {
// process: '锯开检',
// item: '贴合大张',
// item2: 'RGV调度次数',
// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
// }, {
// process: '锯开检',
// item: 'CCD',
// item2: '前光电1计数',
// custom: '{"本周/This Week": 1}'
// }, {
// process: '锯开检',
// item: 'CCD',
// item2: '前光电2计数',
// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
// }, {
// process: '锯开检',
// item: 'CCD',
// item2: '后光电计数',
// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
// }, {
// process: '锯开检',
// item: '汇总数量',
// item2: '贴合大张',
// custom: '{"本周/This Week": 1}'
// }, {
// process: '锯开检',
// item: '汇总数量',
// item2: 'CCD产出',
// custom: '{"本周/This Week": 1}'
// },
// {
// process: '',
// item: '',
// item2: '',
// custom: ''
// }, {
// process: 'PE',
// item: '汇总数量',
// item2: '投入',
// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
// }, {
// process: 'PE',
// item: '汇总数量',
// item2: '产出',
// months: '9月1日',
// custom: '{"本周/This Week": 1 }'
// },
// {
// process: '',
// item: '',
// item2: '',
// custom: ''
// }, {
// process: '打包',
// item: '汇总数量',
// item2: '投入',
// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
// }, {
// process: '打包',
// item: '汇总数量',
// item2: '产出',
// custom: '{"本周/This Week": 1 }'
// }
// ], // 表头数据
tableColumns: [],
propArr: [],
title: [],
tableData: []
})
