修改el-table底部滚动条 添加右边滚动条

<template>
  <div class="dhc-table">
    <el-row>
      <el-col :span="16">
        <div class="table">
          <el-scrollbar style="height: 100%">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="org" label="机构" width="180">
              </el-table-column>
              <el-table-column prop="name" label="人员" width="180">
              </el-table-column>
              <el-table-column prop="car" label="车辆" width="180">
              </el-table-column>
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="line" label="路线"> </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="tables">
          <el-scrollbar style="height: 100%">
            <div class="imgox">
              <div class="img">
                <img :src="require('@/assets/img/car.png')" alt="" />
              </div>
              <div class="img">
                <img :src="require('@/assets/img/car.png')" alt="" />
              </div>
                   <div class="img">
                <img :src="require('@/assets/img/car.png')" alt="" />
              </div>
            </div>
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      tableData: [
        {
          org: "呼市第一大队",
          date: "2016-05-02",
          name: "王小虎",
          car: "蒙A12333",
          line: "S104下行K37",
        },
        {
          org: "呼市第一大队",
          date: "2016-05-02",
          name: "王小虎",
          car: "蒙A12333",
          line: "S104下行K37",
        },
        {
          org: "呼市第一大队",
          date: "2016-05-02",
          name: "王小虎",
          car: "蒙A12333",
          line: "S104下行K37",
        },
        {
          org: "呼市第一大队",
          date: "2016-05-02",
          name: "王小虎",
          car: "蒙A12333",
          line: "S104下行K37",
        },
        {
          org: "呼市第一大队",
          date: "2016-05-02",
          name: "王小虎",
          car: "蒙A12333",
          line: "S104下行K37",
        },
        {
          org: "呼市第一大队",
          date: "2016-05-02",
          name: "王小虎",
          car: "蒙A12333",
          line: "S104下行K37",
        },
        {
          org: "呼市第一大队",
          date: "2016-05-02",
          name: "王小虎",
          car: "蒙A12333",
          line: "S104下行K37",
        },
        {
          org: "呼市第一大队",
          date: "2016-05-02",
          name: "王小虎",
          car: "蒙A12333",
          line: "S104下行K37",
        },
        {
          org: "呼市第一大队",
          date: "2016-05-02",
          name: "王小虎",
          car: "蒙A12333",
          line: "S104下行K37",
        },
        {
          org: "呼市第一大队",
          date: "2016-05-02",
          name: "王小虎",
          car: "蒙A12333",
          line: "S104下行K37",
        },
        {
          org: "呼市第一大队",
          date: "2016-05-02",
          name: "王小虎",
          car: "蒙A12333",
          line: "S104下行K37",
        },
        {
          org: "呼市第一大队",
          date: "2016-05-02",
          name: "王小虎",
          car: "蒙A12333",
          line: "S104下行K37",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.dhc-table {
  ::v-deep {
    .el-row {
      width: 100%;
      height: calc(100vh - 120px);
      background: #010f29;
    }
  }
}
.imgox {
  width: 100%;
  height: calc(100vh - 20px - 120px);
  padding: 10px;
  .img {
    width: 100%;
    img {
      width: 100%;
    }
  }
}
.table {
  height: calc(100vh - 20px - 120px);
  margin-top: 22px;
  margin-left: 20px;
  padding: 30px;
  background: url("~@/assets/img/tableBg.png") no-repeat center center;
  background-size: 100% 100%;
}
.tables {
  height: calc(100vh - 20px - 70px);
  margin-left: 20px;
  padding: 30px;
}

.table ::v-deep .el-table--fit {
  padding: 20px 20px 0 20px;
}
.table ::v-deep th {
  background: transparent;
}
.table ::v-deep td {
  border: none;
}
.table ::v-deep .is-leaf {
  border: none;
}

.table ::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.table ::v-deep .el-table tr {
  background-color: transparent !important;
}
.table .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}

.table ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #052c58;
}
.table ::v-deep thead {
  color: #fff;
}
.table ::v-deep .el-table {
  color: #89aed7;
}
.table ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  height: 10px;
}
.table ::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.tables ::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.table ::v-deep .el-scrollbar__thumb {
  background-color: #89aeb7;
  border-radius: 3px;
}
.tables ::v-deep .el-scrollbar__thumb {
  background-color: #89aeb7;
  border-radius: 3px;
}
.table ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #89aeb7;
  border-radius: 3px;
}
// .table ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
//   background-color: red;
//   padding: 20px;
//   border-radius: 3px;
// }
.table ::v-deep .el-scrollbar__view .el-table{
  padding-bottom:6px;
}
.el-table::before {
  //去除底部白线
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
</style>