表格頁面內(nèi)容
??<section??class="mainRight03?clearstyle">
??????<div??class="main_table">
?????????<el-table
??????:data="planData"
??????:span-method="arraySpanMethod"
??????style="width:?100%"
??????>
??????<el-table-column
??????align="center"
????????prop="VEL_VOY"
????????label="船名/航次"
????????width="90">
??????</el-table-column>
??????<el-table-column
????????prop="BERTH_TER"
????????label="方案"
????????align="center"
????????width="50"
????????>
??????</el-table-column>
??????<el-table-column
????????prop="VEL_TEU"
????????label="箱量"
????????align="center"
????????width="50"
?????????>
??????</el-table-column>
??????<el-table-column
????????prop="VEL_BOOKRATE"
????????label="艙位積載率"
????????align="center"
????????>
??????</el-table-column>
??????<el-table-column
????????prop="VEL_TRANRATE"
????????label="轉(zhuǎn)碼頭率"
?????????align="center">
??????</el-table-column>
????</el-table>
??????</div>
????</section>
數(shù)據(jù)部分： 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;
}
??}
展示效果：
