浪迹天涯king教你用elementui做复杂的表格，去处理报表数据（合并表头，合并表体行和列）浪迹天涯king教你用elementui做复

掘金链接（掘金-复杂的报表开发（elementui））
1、不用多说了，先上图片 【浪迹天涯king教你用elementui做复杂的表格，去处理报表数据（合并表头，合并表体行和列）】

2、功能特性

1.表头的背景色，标题的虚线边框 2.表头的个别单元格样式 3. 表头合并行功能 4. 复杂的动态表头功能 5. 表体渲染下标从第n行开始 6. 表体第一行，第二行的1,2,3列合并 7. 表体第一行，第二行的，“达成”，“环比”，“排名”合并 8. 表体的个别单元格样式

3、代码（直接复制粘贴看效果）

.changeElBoCoSt { .el-table__header { // border-right: 1px solid #000; border-top: 1px solid #000; border-left: 1px solid #000; } .el-table__body { // border-right: 1px solid #000; // border-bottom: 1px solid #000; border-left: 1px dashed #000; }.el-table--border td { border-right: 1px dashed #000; } .el-table--border th { border-right: 1px solid #000; } .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed { border-right: 1px dashed #000; }.el-table--border th { border-bottom: 1px solid #000; }.el-table__fixed-right-patch { border-bottom: 1px dashed #000; }.el-table td { border-bottom: 1px dashed #000; } .el-table th.is-leaf { border-bottom: 1px solid #000; }.el-table__header tr, .el-table__header th { background-color: #ffc000 !important; } // // body的每一行的最后一个单元格 // .el-table__body tr td:last-child { //border-right: 1px solid #000; // } // // body的最后一行 // .el-table__body tr:last-child td { //border-bottom: 1px solid #000; // } // //（刚好最后两行的第一列有合并才要这个） // .el-table__body tr:first-child td:first-child { //border-bottom: 1px solid #000; // }// 双下划线（表体） // .kingRowIndex td { //border-bottom: 2px solid #000000 !important; // } // 表头 // .kingRowIndex1 { //border-right: 2px solid #000000 !important; // } }