场景
修改前端Element组件el-table样式

实现

1. 线表格
   

<div class="tablepro">
        <el-table
          :data="tableData"
          :header-cell-style="{ textAlign:'center'}"
          class="tablepro-table"
          border
          style="width: 100%;height:100%">
          <!-- <el-table-column
            prop="taskId"
            label="任务ID"
            width="90">
          </el-table-column> -->
          <el-table-column
            align="center"
            prop="taskName"
            label="任务名称"
            min-width="150">
          </el-table-column>
          <el-table-column
            align="center"
            prop="zhuangtai"
            label="任务状态"
            min-width="75">
          </el-table-column>
          <el-table-column
            prop="tasklx"
            align="center"
            label="任务类型"
            min-width="80">
          </el-table-column>
          <el-table-column
            prop="device.nickname"
            align="center"
            label="执行机场"
            min-width="170">
          </el-table-column>
          <el-table-column
            prop="wayline.waylineName"
            align="center"
            label="航线名称"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="wayline.userName"
            align="center"
            label="创建人"
            min-width="80">
          </el-table-column>
          <el-table-column
            prop="beginTime"
            align="center"
            label="创建时间"
            min-width="160">
          </el-table-column>
          <!-- <el-table-column
            prop="endTime"
            label="结束时间"
            min-width="130">
          </el-table-column> -->
          <el-table-column
            prop="errMsg"
            label="备注"
            min-width="200">
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                type="danger"
                @click="handleDone(scope.$index, scope.row)">执行</el-button> -->
                <el-button
                size="mini"
                @click="handleGuiJi(scope.$index, scope.row)"
                v-if="scope.row.status==2&&!changeck"
                >轨迹</el-button>
                <!-- <el-button
                size="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>