共计 6963 个字符，预计需要花费 18 分钟才能阅读完成。
掘金链接（掘金 - 简单的报表开发（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>
正文完
发表至： element-ui
2021-08-09
