el-table复杂表头（多级表头行或列的合并）

el-table复杂表头（多级表头行或列的合并）

第一种

需求

实现效果

实现方式

<el-table:data="tableData"bordermax-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}}
}