vue3中el-table实现多表头并表格合并行或列

1、el-table中添加事件 :span-method="genderSpanCity"

<el-table :span-method="genderSpanCity":data="data.tableData":fit="true" table-layout="fixed" header-align="center" stripestyle="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 = 1for (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: []
})