element Ui 表格合并的记录
最近写了一个关于elementui表格的合并需求，记录一下
一下是全部代码
<template>
<div class="sheetTable_tab">
<el-table
:data="tableData"
:span-method="spanMethod"
border
style="width: 100%"
align="center"
:cell-style="cellStyle"
:row-class-name="tableRowClassName"
>
<!-- 设备类型 -->
<el-table-column
label="设备类型"
align="center"
prop="id"
label-class-name="merge_thead"
header-align="right"
></el-table-column>
<el-table-column
prop="name"
align="center"
width="200"
label=" "
></el-table-column>
<!-- 参考标准 -->
<el-table-column
label="参考标准"
align="center"
width="150"
prop="amount2"
label-class-name="font_cor"
></el-table-column>
<!-- 时间区间 -->
<el-table-column
v-for="(item, index) in time_arr"
:key="index"
:label="item"
align="center"
label-class-name="font_cor"
prop="amount3"
></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "sheetTable",
data() {
return {
time_arr: [
"20时",
"21时",
"22时",
"23时",
"00时",
"01时",
"02时",
"03时",
"04时",
"05时",
"06时",
"07时",
"08时",
"09时",
"10时",
"11时",
"12时",
"13时",
"14时",
"15时",
"16时",
"17时",
"18时",
"19时",
"20时",
],
tableData: [
{
id: "气象站",
activity: [
{
id: "气象站",
name: "国家站",
amount1: "234",
amount2: "3.2%",
amount3: "97%",
},
{
id: "气象站",
name: "区域站",
amount1: "234",
amount2: "3.2",
amount3: 10,
},
{
id: "气象站",
name: "探空站",
amount1: "234",
amount2: "3.2",
amount3: 10,
},
],
},
{
id: "雷达站",
activity: [
{
id: "雷达站",
name: "双偏振天气雷达",
amount1: "621",
amount2: "2.2",
amount3: 17,
},
{
id: "雷达站",
name: "x波段天气雷达",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
],
},
],
arr: [],
};
},
methods: {
// 合并的单元格
spanMethod({ row, column, rowIndex, columnIndex }) {
let _row = null;
let _col = null;
if (columnIndex === 0) {
_row = this.spanData[rowIndex];
_col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
// 计算需要合并的单元格
getSpanData(data) {
// 存放计算好的合并单元格的规则
this.spanData = [];
for (var i = 0, len = data.length; i < len; i++) {
if (i === 0) {
this.spanData.push(1);
this.pos = 0;
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].id === data[i - 1].id) {
this.spanData[this.pos] += 1;
this.spanData.push(0);
} else {
this.spanData.push(1);
this.pos = i;
}
}
}
},
// 单独改变某个td字体颜色
cellStyle(row, column, rowIndex, columnIndex) {
//根据报警级别显示颜色
// console.log(row);
// console.log(row.column);
if (row.column.label == "设备类型" || row.column.label == " ") {
return {
"color":'white',
"backgroundColor":' #002060 !important'
}
} else {
return "color: #33bc62";
}
},
// 自定义elementui 表格隔行背景色
tableRowClassName({ row, rowIndex }) {
if ((rowIndex + 1) % 2 === 0) {
return "warning-row"; //类名
} else {
return "success-row"; //类名
}
},
},
created() {
this.tableData.forEach((item, index) => {
this.arr.push(...item.activity);
});
this.tableData = this.arr;
this.getSpanData(this.tableData);
},
};
</script>
<style lang="less" scoped>
.sheetTable_tab {
width: 100%;
height: 100%;
}
/deep/ .merge_thead {
width: 200px !important;
text-align: center !important;
overflow: visible !important;
border-right: none !important;
}
/deep/ .merge_thead .cell {
position: absolute;
z-index: 1;
margin-right: -25px;
}
/deep/ .el-table .el-table__cell {
padding: 2px 0 !important;
}
/deep/ .el-table th.el-table__cell {
background-color: #4472c4 !important;
color: white;
}
/deep/ .el-table--border {
color: white;
border: 0 !important;
}
/deep/ .el-table th.el-table__cell.is-leaf {
border-color: #224587 !important;
}
/deep/ .el-table tr {
background-color: #002060 !important;
}
/deep/ .el-table td.el-table__cell {
border-color: #224587 !important;
}
/deep/ .el-table--border::after,
.el-table--group::after,
.el-table::before {
width: 0 !important;
}
// 自定义elementui 鼠标悬停改变背景颜色样式
/deep/ .el-table tbody tr:hover > td {
background-color: #0340ba !important;
}
//自定义样式
/deep/ .el-table .warning-row {
background-color: #002a78 !important;
}
/deep/ .el-table .success-row {
background-color: #002060 !important;
}
</style>
