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

1、不用多说了，先上图片

2、功能特性

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

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

<template><div class="changeElBoCoSt kingChangeHead"><el-table:data="tableData"style="width: 100%":span-method="objectSpanMethod":row-class-name="rowClassName":cell-class-name="cellClassNameKing":header-cell-class-name="headerCellClassNameKing":header-cell-style="headerCellStyleNameKing"><el-table-column label="7月-罗湖东子公司各项质量达成汇总" align="center"><el-table-column :index="kingIndex" type="index" label="序号" align="center"></el-table-column><el-table-column label="类型" width="120" align="center"><template slot-scope="scope"><span v-if="scope.$index == 0" style="font-weight: bold;">各区排名<span style="color: blue;">第一</span>项目个数</span><span v-else>{{ scope.row.type }}</span></template></el-table-column><el-table-column prop="project" label="项目" width="120" align="center"></el-table-column><el-table-column v-for="(value1, key, index) in tableData[0]['daySale']" :key="index + 'day'" :label="key" align="center"><el-table-column v-for="(value2, key2, index2) in value1" :key="index2" :label="key2" align="center"><el-table-column v-for="(item1, index1) in value2" :key="index1" :label="item1.name" align="center"><template slot-scope="scope"><span :style="{color:scope.row.daySale[key][key2][index1]['isColor'] == 1? 'blue': scope.row.daySale[key][key2][index1]['isColor'] == 2? 'red': '',fontWeight:scope.row.daySale[key][key2][index1]['isColor'] == 1 || scope.row.daySale[key][key2][index1]['isColor'] == 2 ? 'bold' : ''}">{{ scope.row.daySale[key][key2][index1]['value'] }}</span></template></el-table-column></el-table-column></el-table-column></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [{type: '各区排名第一项目个数',project: '各区排名第一项目个数',daySale: {'7月': {整体: [{name: '整体',value: 0.32,isColor:null,}],宝安: [{name: '达成',value: 0.33,isColor:null,},{name: '环比',value: 0.33,isColor:null,},{name: '排名',value: 0.33,isColor:null,}],龙岗: [{name: '达成',value: 0.331,isColor:null,},{name: '环比',value: 0.341,isColor:null,},{name: '排名',value: 0.351,isColor:null,}]},'第一周（7月1日-6日）': {整体: [{name: '整体',value: 0.322,isColor:null,}],宝安: [{name: '达成',value: 0.332,isColor:null,},{name: '环比',value: 0.342,isColor:null,},{name: '排名',value: 0.352,isColor:null,}],龙岗: [{name: '达成',value: 0.332,isColor:null,},{name: '环比',value: 0.342,isColor:null,},{name: '排名',value: 0.352,isColor:null,}]}}},{type: '各区排名最后项目个数',project: '各区排名最后项目个数',daySale: {'7月': {整体: [{name: '整体',value: 0.32,isColor:1,}],宝安: [{name: '达成',value: 0.33,isColor:null,},{name: '环比',value: 0.34,isColor:2,},{name: '排名',value: 0.35,isColor:null,}],龙岗: [{name: '达成',value: 0.331,isColor:null,},{name: '环比',value: 0.341,isColor:null,},{name: '排名',value: 0.351,isColor:null,}]},'第一周（7月1日-6日）': {整体: [{name: '整体',value: 0.322,isColor:null,}],宝安: [{name: '达成',value: 0.332,isColor:null,},{name: '环比',value: 0.342,isColor:null,},{name: '排名',value: 0.352,isColor:null,}],龙岗: [{name: '达成',value: 0.332,isColor:null,},{name: '环比',value: 0.342,isColor:null,},{name: '排名',value: 0.352,isColor:null,}]}}},{type: '收件1',project: '收件滞留率1',daySale: {'7月': {整体: [{name: '整体',value: 0.328,isColor:null,}],宝安: [{name: '达成',value: 0.338,isColor:null,},{name: '环比',value: 0.348,isColor:null,},{name: '排名',value: 0.358,isColor:null,}],龙岗: [{name: '达成',value: 0.3318,isColor:null,},{name: '环比',value: 0.3418,isColor:null,},{name: '排名',value: 0.3518,isColor:null,}]},'第一周（7月1日-6日）': {整体: [{name: '整体',value: 0.3229,isColor:null,}],宝安: [{name: '达成',value: 0.3329,isColor:null,},{name: '环比',value: 0.3429,isColor:null,},{name: '排名',value: 0.3529,isColor:null,}],龙岗: [{name: '达成',value: 0.3329,isColor:null,},{name: '环比',value: 0.3429,isColor:null,},{name: '排名',value: 0.3529,isColor:null,}]}}}],selectData: [],// 统计合并多少行needMergeArr: ['type'], // 有合并项的列rowMergeArrs: {} // 包含需要一个或多个合并项信息的对象};},mounted() {this.getList();},updated() {this.$nextTick(() => {if (this.$refs.mutipleTable !== undefined) {this.$refs.mutipleTable.doLayout();}});},methods: {/*** @description 实现合并行或列* @param row:Object 需要合并的列name 如:'name' 'id'* @param column:Object 当前行的行数，由合并函数传入* @param rowIndex:Number 当前列的数据，由合并函数传入* @param columnIndex:Number 当前列的数据，由合并函数传入** @return 函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，* 第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象*/objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 第一行的达成，环比，排名，列合并if (rowIndex === 0) {if (column.label == '达成') {return [1, 3];} else if (column.label == '环比') {return [0, 0];} else if (column.label == '排名') {return [0, 0];}}// 第一，第二行的1,2,3列合并if (rowIndex === 0 || rowIndex === 1) {if (columnIndex === 0) {return [0, 0];} else if (columnIndex === 1) {return [1, 3];} else if (columnIndex === 2) {return [0, 0];}}// 方法二:（合并行）for (let key in this.rowMergeArrs) {if (column.property == key) {let _row = this.rowMergeArrs[key].rowArr[rowIndex];let _col = _row > 0 ? 1 : 0;return [_row, _col];}}},// 用来合并表头的（label为“整体”的上下两行合并）headerCellStyleNameKing({ row, column, rowIndex, columnIndex }) {if(rowIndex === 0){this.$nextTick(() => {if ($('.'+column.id).length !== 0) {$('.'+column.id+' .cell').css({'color':'#111','font-weight': 'bold'}); }});return column;}else if (rowIndex === 2) {if (column.label == '整体') {this.$nextTick(() => {if ($('.'+column.id).length !== 0) {$('.'+column.id+' .cell').css({'color':'#111','font-weight': 'bold'});$('.'+column.id).attr('rowspan', 2);// var _c = document.getElementsByClassName(column.id);// document.getElementsByClassName(column.id)[0].setAttribute('rowSpan', 2);}});return column;}} else if (rowIndex === 3) {if (column.label == '整体') {return { display: 'none' };}}},// 解决下标从第二行开始，（数字要从1开始）kingIndex(index) {if (index != 0 || index != 1) {return index - 1;}},// 解决表头的双下划线headerCellClassNameKing({ row, column, rowIndex, columnIndex }) {if (columnIndex == 6) {return 'kingRowIndex1';}},cellClassNameKing({ row, column, rowIndex, columnIndex }) {if (columnIndex == 6) {return 'kingRowIndex1';}},// 给行添加类名(用于单元格的下划线问题)rowClassName({ row, rowIndex }) {if (rowIndex == this.kingRowIndex - 1) {return 'kingRowIndex';}},getList() {// 实线加粗this.kingRowIndex = 1;// 处理数据this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);}}
};
</script>
<style lang="scss">
.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;// }
}
</style>

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

用备份控制文件做不完全恢复下的完全恢复（数据文件备份旧--新建表空间--控制文件备份次新--日志归档文件新）...
为什么会使用备份的控制文件? 实际工作中主要有两种情况: 第一种:当前控制文件全部损坏,而数据文件备份,控制文件备份及当前日志处于不同SCN版本,它们之间又增加过表空间(数据文件). 第二种:当前控制 ...
打印设置自定义表尾_教大家Excel2013表格中如何打印固定的表头和表尾
近日有关于Excel2013表格中如何打印固定的表头和表尾的问题受到了很多网友们的关注,大多数网友都想要知道Excel2013表格中如何打印固定的表头和表尾的具体情况,那么关于到Excel2013表格 ...
文章如何做伪原创 SEO大神教你几招做原创网站文章的心得
想要创作出好的文章并被百度所喜欢,就非常需要SEO的优化能力,以及要对文章进行塬创或伪塬创,那么,如何做伪塬创文章?以及如何做好塬创网站文章呢?对此,本文小编就为大家带来了几招做"塬创&qu ...
python代码示例图形-纯干货：手把手教你用Python做数据可视化（附代码）
原标题:纯干货:手把手教你用Python做数据可视化(附代码) 导读:制作提供信息的可视化(有时称为绘图)是数据分析中的最重要任务之一.可视化可能是探索过程的一部分,例如,帮助识别异常值或所需的数据转 ...
手把手教你用C#做疫情传播仿真
手把手教你用C#做疫情传播仿真在上篇文章中,我介绍了用 C#做的疫情传播仿真程序的使用和配置,演示了其运行效果,但没有着重讲其中的代码. 今天我将抽丝剥茧,手把手分析程序的架构,以及妙趣横生的细节. ...
elementui的tree组件页面显示不出数据_只要10分钟，教你配置出炫酷的数据可视化大屏...
在电影<摩天营救>中,监控中心的全方位展示屏幕给人印象深刻.现在这种立体化大屏幕似乎成了好莱坞大片的标配.其实,这种逼格很高的镜头就是一个数据可视化大屏.随着社会信息化的高速增长,数据可视 ...
归纳推理测试没做完_天气热，教你用寒天粉做果冻，清凉爽滑，5秒吃完一盘没问题...
天气越来越热,热得人连食欲都大减,网络上有很多教做夏日菜的菜谱,其原因无非是夏天真的让人没什么胃口.不过,小汐身为广东人,凉拌菜其实也不常吃,反而是甜品永远是大爱.对了,这就是夏天最大的优点,冰凉的汽 ...
python画图代码大全-纯干货：手把手教你用Python做数据可视化（附代码）
原标题:纯干货:手把手教你用Python做数据可视化(附代码) 导读:制作提供信息的可视化(有时称为绘图)是数据分析中的最重要任务之一.可视化可能是探索过程的一部分,例如,帮助识别异常值或所需的数据转 ...
【PR】简单一招教你使用蒙版做文字动画
更多PR简单技巧尽在专栏中,会一直更新PR使用技巧简单一招教你使用蒙版做文字动画效果图制作步骤还可以加一个文字的缩放,从小到大的过程博主微信欢迎交流效果图制作步骤点击选择的字幕点击钢 ...

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

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

最新文章

热门文章