場景
修改前端Element組件el-table樣式

實現

1. 線表格
   

<div class="tablepro"><el-table:data="tableData":header-cell-style="{ textAlign:'center'}"class="tablepro-table"borderstyle="width: 100%;height:100%"><!-- <el-table-columnprop="taskId"label="任務ID"width="90"></el-table-column> --><el-table-columnalign="center"prop="taskName"label="任務名稱"min-width="150"></el-table-column><el-table-columnalign="center"prop="zhuangtai"label="任務狀態"min-width="75"></el-table-column><el-table-columnprop="tasklx"align="center"label="任務類型"min-width="80"></el-table-column><el-table-columnprop="device.nickname"align="center"label="執行機場"min-width="170"></el-table-column><el-table-columnprop="wayline.waylineName"align="center"label="航線名稱"min-width="100"></el-table-column><el-table-columnprop="wayline.userName"align="center"label="創建人"min-width="80"></el-table-column><el-table-columnprop="beginTime"align="center"label="創建時間"min-width="160"></el-table-column><!-- <el-table-columnprop="endTime"label="結束時間"min-width="130"></el-table-column> --><el-table-columnprop="errMsg"label="備注"min-width="200"></el-table-column><el-table-column label="操作" width="120"><template slot-scope="scope"><!-- <el-buttonsize="mini"type="danger"@click="handleDone(scope.$index, scope.row)">執行</el-button> --><el-buttonsize="mini"@click="handleGuiJi(scope.$index, scope.row)"v-if="scope.row.status==2&&!changeck">軌跡</el-button><!-- <el-buttonsize="mini"@click="handleGuiJiChange(scope.$index, scope.row)"v-if="scope.row.status==2&&changeck">軌跡</el-button> --></template></el-table-column></el-table></div><style lang="scss" scoped>
.guiji-pop{height: 100%;width: 100%;.tablepro {width: 100%;height: calc(100% - 0.82rem);margin-top: 0.16rem;::v-deep .el-table__body-wrapper {height: calc(100% - 0.48rem);overflow-y: auto;}}
}
::v-deep .el-input .el-input__clear:hover,
::v-deep .el-table th.el-table__cell.is-leaf{color: #fff;
}
::v-deep .el-table--group, 
::v-deep .el-table--border,
::v-deep .el-table th.el-table__cell.is-leaf,
::v-deep .el-table td.el-table__cell{border: 1px solid #00529D;
}
el-table::before, .el-table--group::after, .el-table--border::after{background-color: transparent;
}
::v-deep .el-table::before {height: 0 !important;
}
::v-deep .el-table,
::v-deep .el-table tr,
::v-deep .el-input__inner,
::v-deep .el-table td.el-table__cell{background: none;color: #fff;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {background: transparent;
}
::v-deep .el-table th.el-table__cell.is-leaf{background: linear-gradient( 180deg, rgba(92,180,249,0.0001) 25%, rgba(95,165,242,0.0706) 50%, rgba(18,140,231,0.1804) 75%, rgba(82,131,223,0.66) 100%) !important;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover{background: linear-gradient( -90deg, rgb(0,125,241) 0%, rgb(45,100,255) 100%) !important;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {border-left: none !important;border-right: none !important;
}
</style>