表格页面内容
:data="planData"
:span-method="arraySpanMethod"
style="width: 100%"
>
align="center"
prop="VEL_VOY"
label="船名/航次"
width="90">
prop="BERTH_TER"
label="方案"
align="center"
width="50"
>
prop="VEL_TEU"
label="箱量"
align="center"
width="50"
>
prop="VEL_BOOKRATE"
label="舱位积载率"
align="center"
>
prop="VEL_TRANRATE"
label="转码头率"
align="center">
数据部分： planData:[],
js逻辑部分：
//合并单元格
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (row.colSpan) {
return [row.colSpan, 1]
} else {
return [0, 0]
}
}
},
// 方案接口
Getplan(){
let self = this
Api.IOPreProject().then((res)=>{
self.planData = res.data.data
let perName = self.planData[0].VEL_VOY
console.log(perName,"123");
let differentIndex = 0
let sum = 0
self.planData.push({ VEL_VOY: null })
self.planData.forEach((item, index) => {
if (item.VEL_VOY !== perName) {
console.log(item.VEL_VOY,"item");
console.log(item.VEL_VOY !== perName);
self.planData[differentIndex].colSpan = sum
perName = item.VEL_VOY
differentIndex = index
sum = 1
} else {
sum++
}
})
self.planData.pop()
})
},
css样式部分：
.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 {
border: none;
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);
}
50% {
transform: translateY(-82%);
}
100% {
transform: translateY(0);
}
}
.main_table /deep/ .el-table__body tbody {
animation: scroll 25s linear infinite;
&:hover {
animation-play-state: paused;
}
}
.main_table /deep/ .el-table tr td {
border: none;
border-bottom: 1px solid #445e86;
background: #134861;
color: #ffffff;
font-size: 10px;
}
.main_table /deep/ .el-table__body-wrapper{
height: calc(100% - 110px);
background: #134861;
}
.main_table /deep/ .el-table:before {
content: "";
position: absolute;
z-index: 1;
}
}
展示效果：
