el-table复杂表头（多级表头行或列的合并）
第一种
需求
实现效果
实现方式
<el-table
:data="tableData"
border
max-height="550px"
:header-cell-style="headerCellStyle"
:span-method="objectSpanMethod"
>
<el-table-column label="分公司下发" align="center">
<el-table-column label="总数" prop="index" align="center">
<el-table-column prop="index" label="序号" align="center"></el-table-column>
</el-table-column>
<el-table-column label="总数的值" align="center">
<template #header>
<div class="tableTitleContent">31</div>
</template>
<el-table-column prop="content" label="内容" align="center"></el-table-column>
</el-table-column>
<el-table-column label="已完成" prop="content" align="center">
<el-table-column label="内容(占位列)"></el-table-column>
</el-table-column>
<el-table-column label="已完成的值" align="center">
<template #header>
<div class="tableTitleContent">12</div>
</template>
<el-table-column label="内容(占位列)"></el-table-column>
</el-table-column>
<el-table-column label="未完成" align="center">
<el-table-column label="内容(占位列)"></el-table-column>
</el-table-column>
<el-table-column label="未完成的值" align="center">
<template #header>
<div class="tableTitleContent">19</div>
</template>
<el-table-column label="内容(占位列)"></el-table-column>
</el-table-column>
<el-table-column label="完成率" align="center">
<el-table-column label="内容(占位列)"></el-table-column>
</el-table-column>
<el-table-column label="完成率的值" align="center">
<template #header>
<div class="tableTitleContent">38.80%</div>
</template>
<el-table-column label="内容(占位列)"></el-table-column>
</el-table-column>
</el-table-column>
<el-table-column label="中心创建" align="center">
<el-table-column label="总数" align="center">
<el-table-column label="内容(占位列)"></el-table-column>
</el-table-column>
<el-table-column label="总数的值" align="center">
<template #header>
<div class="tableTitleContent">12</div>
</template>
<el-table-column label="内容(占位列)"></el-table-column>
</el-table-column>
<el-table-column label="已完成" align="center">
<el-table-column label="内容(占位列)"></el-table-column>
</el-table-column>
<el-table-column label="已完成的值" align="center">
<template #header>
<div class="tableTitleContent">6</div>
</template>
<el-table-column label="内容(占位列)"></el-table-column>
</el-table-column>
<el-table-column label="未完成" align="center">
<el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
</el-table-column>
<el-table-column label="未完成的值" align="center">
<template #header>
<div class="tableTitleContent">6</div>
</template>
<el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
</el-table-column>
<el-table-column label="完成率" align="center">
<el-table-column prop="deptName" label="创建部门" align="center"></el-table-column>
</el-table-column>
<el-table-column label="完成率的值" align="center">
<template #header>
<div class="tableTitleContent">50%</div>
</template>
<el-table-column prop="isFinished" label="是否完成" align="center"></el-table-column>
</el-table-column>
</el-table-column>
<template v-slot:empty>
<table-empty></table-empty>
</template>
</el-table>
// 计算表头是否展示
const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
if (rowIndex === 2) {
if (columnIndex > 1 && columnIndex < 12) {
return { display: 'none' }
}
}
// 然后让第2行第1列的单元格横向占据11个单元格位置填充刚刚隐去导致的空白
if ((columnIndex == 1) & (rowIndex == 2)) {
nextTick(() => {
document.querySelector(`.${column.id}`).setAttribute('colspan', '11')
})
}
}
// 合并单元格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
if (columnIndex == 1) {
return {
rowspan: 1,
colspan: 11
}
} else if (columnIndex > 1 && columnIndex <= 11) {
return {
rowspan: 0,
colspan: 0
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
}
第二种
需求
实现效果
实现方式
<el-table :data="tableData" border :header-cell-style="headerCellStyle" :span-method="objectSpanMethod">
<el-table-column label="成果" align="center" show-overflow-tooltip>
<el-table-column label="占位单元格">
<el-table-column label="占位单元格">
<el-table-column label="占位单元格">
<el-table-column label="占位单元格">
<el-table-column prop="index" label="序号" align="center"></el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column label="专利" align="center" show-overflow-tooltip>
<el-table-column label="论文" align="center" show-overflow-tooltip>
<el-table-column label="软著" align="center" show-overflow-tooltip>
<el-table-column label="占位单元格">
<el-table-column label="占位单元格">
<el-table-column prop="content" label="内容" align="center" show-overflow-tooltip></el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column label="专利的值" align="center" show-overflow-tooltip>
<template #header>
<div class="tableTitleContent">--</div>
</template>
<el-table-column label="论文的值" align="center" show-overflow-tooltip>
<template #header>
<div class="tableTitleContent">--</div>
</template>
<el-table-column label="软著的值" align="center" show-overflow-tooltip>
<template #header>
<div class="tableTitleContent">--</div>
</template>
<el-table-column label="占位单元格">
<el-table-column label="占位单元格">
<el-table-column label="内容(占位单元格)"/>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column label="项目" align="center" show-overflow-tooltip>
<el-table-column label="占位单元格">
<el-table-column label="占位单元格">
<el-table-column label="占位单元格">
<el-table-column label="占位单元格">
<el-table-column label="内容(占位单元格)"/>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column label="自研产品" align="center" show-overflow-tooltip>
<el-table-column label="科研项目" align="center" show-overflow-tooltip>
<el-table-column label="全员双创" align="center" show-overflow-tooltip>
<el-table-column label="占位单元格">
<el-table-column label="占位单元格">
<el-table-column label="内容(占位单元格)"/>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column label="自研产品的值" align="center" show-overflow-tooltip>
<template #header>
<div class="tableTitleContent">--</div>
</template>
<el-table-column label="科研项目的值" align="center" show-overflow-tooltip>
<template #header>
<div class="tableTitleContent">--</div>
</template>
<el-table-column label="全员双创的值" align="center" show-overflow-tooltip>
<template #header>
<div class="tableTitleContent">--</div>
</template>
<el-table-column label="占位单元格">
<el-table-column label="占位单元格">
<el-table-column label="内容(占位单元格)"/>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column label="标准" align="center" show-overflow-tooltip>
<el-table-column label="占位单元格">
<el-table-column label="占位单元格">
<el-table-column label="占位单元格">
<el-table-column label="占位单元格">
<el-table-column label="内容(占位单元格)"/>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column label="国家标准" align="center" show-overflow-tooltip>
<el-table-column label="行业标准" align="center" show-overflow-tooltip>
<el-table-column label="地方标准" align="center" show-overflow-tooltip>
<el-table-column label="团体标准" align="center" show-overflow-tooltip>
<el-table-column label="企业标准" align="center" show-overflow-tooltip>
<el-table-column label="创新成果分类" align="center" show-overflow-tooltip></el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column label="国家标准的值" align="center" show-overflow-tooltip>
<template #header>
<div class="tableTitleContent">--</div>
</template>
<el-table-column label="行业标准的值" align="center" show-overflow-tooltip>
<template #header>
<div class="tableTitleContent">--</div>
</template>
<el-table-column label="地方标准的值" align="center" show-overflow-tooltip>
<template #header>
<div class="tableTitleContent">--</div>
</template>
<el-table-column label="团体标准的值" align="center" show-overflow-tooltip>
<template #header>
<div class="tableTitleContent">--</div>
</template>
<el-table-column label="企业标准的值" align="center" show-overflow-tooltip>
<template #header>
<div class="tableTitleContent">--</div>
</template>
<el-table-column label="详细分类" align="center" show-overflow-tooltip></el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
<template v-slot:empty>
<table-empty></table-empty>
</template>
</el-table>
// 计算表头是否展示
const headerCellStyle = ({row, column, rowIndex, columnIndex}) => {
// 合并内容列
if (rowIndex === 5) {
if (columnIndex > 1 && columnIndex < 7) {
return { display: 'none' }
}
// 然后让第5行第1列的单元格横向占据8个单元格位置填充刚刚隐去导致的空白
if (columnIndex === 1) {
nextTick(() => {
document.querySelector(`.${column.id}`).setAttribute('colspan', '6')
})
}
}
// 合并成果、专利、标准列
if (rowIndex > 0 && rowIndex < 5) {
if (columnIndex === 0 || columnIndex === 3 || columnIndex === 6) {
return { display: 'none' }
}
}
if (rowIndex === 0 && (columnIndex === 0 || columnIndex === 3 || columnIndex === 6)) {
nextTick(() => {
document.querySelector(`.${column.id}`).setAttribute('rowspan', '5')
})
}
// 合并其他单元格
if (rowIndex === 3 || rowIndex === 4) {
if (columnIndex !== 0 && columnIndex !== 3 && columnIndex !== 6 && columnIndex !== 7 && columnIndex !== 8) {
return { display: 'none' }
// return { visibility: 'hidden' }
}
}
if (rowIndex === 2) {
if (columnIndex == 1 || columnIndex === 2 || columnIndex === 4 || columnIndex === 5) {
nextTick(() => {
document.querySelector(`.${column.id}`).setAttribute('rowspan', '3')
})
}
}
}
// 合并单元格
const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
if (columnIndex == 1) {
return {
rowspan: 1,
colspan: 6
}
} else if (columnIndex > 1 && columnIndex < 7) {
return {
rowspan: 0,
colspan: 0
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
}