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\” 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
}
}
}
}