原本展示效果:
页面展示：
<section class="mainRight03">
<div class="main_table">
<el-table :data="planData" :span-method="arraySpanMethod" :row-class-name="tableClassName" style="width: 100%">
<el-table-column align="center" prop="VEL_VOY" label="船名/航次" width="110">
<template slot-scope="scope">
<div>{{scope.row.VEL_VOY1}}</div>
<div>{{scope.row.VEL_VOY2}}</div>
<div>{{scope.row.VEL_VOY3}}</div>
</template>
</el-table-column>
<el-table-column prop="BERTH_TER" label="方案" align="center" width="70"></el-table-column>
<el-table-column prop="VEL_TEU" label="箱量" align="center" width="70" ></el-table-column>
<el-table-column prop="VEL_BOOKRATE" label="舱位积载率" align="center"></el-table-column>
<el-table-column prop="VEL_TRANRATE" label="转码头率" align="center"></el-table-column>
</el-table>
</div>
</section>
逻辑部分：
// 方案接口
Getplan(){
let self = this
Api.IOPreProject().then((res)=>{
self.planData = res.data.data
let perName = self.planData[0].VEL_VOY
let differentIndex = 0
let sum = 0
self.planData.push({ VEL_VOY: null })
self.planData.forEach((item, index) => {
if (item.VEL_VOY !== perName) {
self.planData[differentIndex].colSpan = sum
perName = item.VEL_VOY
differentIndex = index
sum = 1
} else {
sum++
}
})
self.planData.pop()
self.planData.map(item=>{
let arr= item['VEL_VOY'].split('/')
item.VEL_VOY1=arr[0]
item.VEL_VOY2=arr[1]
item.VEL_VOY3=arr[2]
console.log(item.VEL_VOY1,'1');
console.log(item.VEL_VOY2,'2');
console.log(item.VEL_VOY3,'3');
return item
})
})
},
样式部分：
.mainRight03 {
width: 100%;
height: 30%;
overflow: hidden;
background: url("~@/assets/images/provisioning/box07.png") no-repeat;
background-size: 100% 100%;
.main_table {
width: 100%;
height: 100%;
padding: 40px;
}
.main_table /deep/ .el-table th,
.el-table tr {
background-color: #20bffb;
width: 90px;
height: 50px;
font-size: 10px;
font-weight: 400;
line-height: 28px;
color: #ffffff;
}
.main_table /deep/ .el-table {
height: 100%;
width: 100%;
}
// table自动滚动
@keyframes scroll {
0% {
transform: translateY(0);
}
40% {
transform: translateY(-40%);
}
80% {
transform: translateY(-80%);
}
100% {
transform: translateY(0%);
}
}
.main_table /deep/ .el-table__body tbody {
animation: scroll 55s linear infinite;
&:hover {
animation-play-state: paused;
}
}
.main_table /deep/ .border_top {
&:not(:first-child) {
td {
border-top: 1px solid #445e86;
}
}
}
.main_table /deep/ .el-table td, .el-table th .is-leaf {
border-bottom: none;
}
.main_table /deep/ .el-table th.is-leaf {
border-bottom: none;
}
.main_table /deep/ .el-table tr td {
background: #000e1b;
color: #ffffff;
font-size: 10px;
}
.main_table /deep/ .el-table__body-wrapper{
height: calc(100% - 100px);
background: #134861;
}
.main_table /deep/ .el-table::before {
width: 0;
height: 0;
}
}
修改之后的效果展示：
