项目场景：
前端开发过程中常常会遇到各种开发表格的场景，有时候有的表格比较简单有的比较复杂（如下图简单示例所示，有合并项和多级表头），Elementui的el-table控件也可以支持构建复杂的表格，本文将指导你如何快速开发复杂表格~~~
编辑
问题描述及解决方案
1、多级表头
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。
编辑
<template> <div class="tableWrap"> <el-table id="resultTableProject" :data="tableData" border v-loading="loading" element-loading-text="数据查询中" :span-method="spanMethod" height="620" size='small' > <el-table-column label="项目编号" prop="id" wdth="160" align="center" /> <el-table-column label="项目名称" prop="casename" align="center" /> <el-table-column label="部门" prop="bm" align="center" /> <el-table-column label="部门人员(产值)" align="center" > <el-table-column v-for="(item, index) in userData" :key="index" :label="item.name" :prop="item.name + 'cz'" width="200" align="center" /> </el-table-column> </el-table> </div> </template> <script setup> import { ref, onMounted,onBeforeMount, watch, reactive ,toRefs,toRaw,shallowRef} from "vue"; let tableData=ref([ { id:202112312,casename:'小家电项目',bm:"制造一队",'张三cz':100,}, { id:202112342,casename:'小家电项目',bm:"制造二队",'李四cz':200,}, { id:202112343,casename:'电视机',bm:"制造三队",'王五cz':300}, { id:202112344,casename:'电视机',bm:"制造三队",'王五cz':300,}, { id:202112345,casename:'空调项目',bm:"制造四队",'孙七cz':300}, { id:202112346,casename:'冰箱项目',bm:"制造四队",'孙七cz':300}, ]) let userData=ref([ { name:'张三', }, { name:'李四', }, { name:'王五', }, { name:'孙七', } ]) </script>
2、合并行或列
通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
编辑
<template> <div class="tableWrap"> <el-table id="resultTableProject" :data="tableData" border v-loading="loading" element-loading-text="数据查询中" :span-method="spanMethod" height="620" size='small' > <el-table-column label="项目编号" prop="id" wdth="160" align="center" /> <el-table-column label="项目名称" prop="casename" align="center" /> <el-table-column label="部门" prop="bm" align="center" /> <el-table-column label="部门人员(产值)" align="center" > <el-table-column v-for="(item, index) in userData" :key="index" :label="item.name" :prop="item.name + 'cz'" width="200" align="center" /> </el-table-column> </el-table> </div> </template> <script setup> import { ref, onMounted,onBeforeMount, watch, reactive ,toRefs,toRaw,shallowRef} from "vue"; let tableData=ref([ { id:202112312,casename:'小家电项目',bm:"制造一队",'张三cz':100,}, { id:202112342,casename:'小家电项目',bm:"制造二队",'李四cz':200,}, { id:202112343,casename:'电视机',bm:"制造三队",'王五cz':300}, { id:202112344,casename:'电视机',bm:"制造三队",'王五cz':300,}, { id:202112345,casename:'空调项目',bm:"制造四队",'孙七cz':300}, { id:202112346,casename:'冰箱项目',bm:"制造四队",'孙七cz':300}, ]) let userData=ref([ { name:'张三', }, { name:'李四', }, { name:'王五', }, { name:'孙七', } ]) const spanMethod = ({ row, column, rowIndex, columnIndex }) => { // 如果当前列不是组织机构列，则返回 { rowspan: 1, colspan: 1 }，表示该单元格不需要合并 // if (columnIndex !== 0 && columnIndex !== 1&& columnIndex !== 2 &&columnIndex!==9&&columnIndex!==10) { // return { rowspan: 1, colspan: 1 }; // } if (columnIndex !== 0 && columnIndex !== 1) { return { rowspan: 1, colspan: 1 }; } // 如果当前行是该组织机构的第一行，则计算该组织机构的行数，并返回 { rowspan, colspan: 1 }，表示需要合并的行数为 rowspan if ( rowIndex === 0 || row.casename !== tableData.value[rowIndex - 1].casename ) { const rowCount = tableData.value.filter( (i) => i.casename === row.casename ).length; return { rowspan: rowCount, colspan: 1 }; } // 否则返回 { rowspan: 0, colspan: 0 }，表示该单元格已被上方单元格合并 return { rowspan: 0, colspan: 0 }; }; </script> <style lang="less" scoped> .tableQualityProject { height: 100vh; width: 100%; overflow: auto; background-image: #f2f2f2; h1 {} } .tableWrap { padding: 0 20px; // width: 100%; // margin: 0 auto; /deep/ .el-table__header th { background-color: #409eff!important ; /* 设置表头颜色 */ color: #fff; /* 设置表头文字颜色 */ // background-color:#FAFAFA; // color:#252525; border:1px solid f5f5f5; } /deep/ .el-table .cell { // font-weight: 700; font-size: 16px; padding: 0; } .gzlWrap { // border-bottom:1px solid #dfdfdf; &:last-child { border-bottom: none; } span { display: inline-block; padding: 5px 0; } .key { width: 60%; } .value { width: 40%; } } .selfTableHead { display: flex; span { display: inline-block; width: 60px; } } } </style>
3、自定义表头颜色
编辑
编辑
最简单的：修改表头样式即可
.tableWrap { padding: 0 20px; // width: 100%; // margin: 0 auto; /deep/ .el-table__header th { background-color: #409eff!important ; /* 设置表头颜色 */ color: #fff; /* 设置表头文字颜色 */ // background-color:#FAFAFA; // color:#252525; border:1px solid f5f5f5; } /deep/ .el-table .cell { // font-weight: 700; font-size: 16px; padding: 0; } .gzlWrap { // border-bottom:1px solid #dfdfdf; &:last-child { border-bottom: none; } span { display: inline-block; padding: 5px 0; } .key { width: 60%; } .value { width: 40%; } } .selfTableHead { display: flex; span { display: inline-block; width: 60px; } } }
