element ui plus调整table表格样式

<template>
  <div class="tab">
    <el-table :data="tableData" style="width: 100%" :row-style="{ height: '56px' }" :cell-style="{ padding: '0px' }"
      class="pt-table" height="1150" :stripe="true">
      <el-table-column prop="createTime" width="250" label="承租时间" align="center">
      </el-table-column>
      <el-table-column prop="tenantCompany" label="承租单位" align="center">
      </el-table-column>
      <el-table-column prop="tenantContacts" width="150" label="联系人" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="tenantPhone" label="联系人电话" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="siteLeader" label="现场负责人" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="siteLeaderPhone" label="负责人电话" align="center" :show-overflow-tooltip="true" />
    </el-table>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { listUnit } from "@/api/zhxz/groupManage/unit"
// import { listTenancy, getTenancy, delTenancy, addTenancy, updateTenancy } from "@/api/zhxz/groupManage/tenancy"
import { listTenancy, listTenant } from "@/api/zhxz/groupManage/tenancy"

export default {

  setup() {
    const tableData = ref([])
    const list = ref([])
    // getUnitList()
    let getUnitList = async () => {
      const { rows: res } = await listTenant();
      tableData.value = res
      console.log("getUnitList", res);
    }
    getUnitList()
    return { tableData, list }
  }
}
</script>
<style lang="less" scoped>
.tab {
  box-sizing: border-box;
  width: 100%;
  height: 80%;
  padding: 10px 20px 10px 20px;
  overflow: auto;
  background: rgba(71, 105, 136, 0.3) !important;
  // border: 1px solid yellow;

  // 表格内容背景
  :deep(.el-table),
  :deep(.el-table__expanded-cell),
  :deep(.el-table__row),
  :deep(.el-table__body-wrapper),
  :deep(.el-table__inner-wrapper),
  :deep(.el-table--fit) {
    background: transparent;

    border: none;
    width: 100%;
    // height: 580px;
  }

  :deep(.el-table thead) {
    background: transparent;

    //表头颜色设置
    font-family: MicrosoftYaHeiLight;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 1px;
    color: #ffffff;
  }

  /* 表tou背景颜色 */

  :deep(.el-table tr) {
    background: transparent;
  }

  :deep(.el-table .el-table__header-wrapper th) {
    // background: transparent !important;
    background: rgba(71, 105, 136, 0.3) !important;
    color: #fff;
    font-size: 20px;
  }

  :deep(.el-table th),
  :deep(.el-table tr:nth-child(even)),
  :deep(.el-table td) {
    background: transparent;
    // background-color: transparent;
    border: none;
    height: 28px;
  }

  // 表格底部白线
  :deep(.el-table__inner-wrapper::before) {
    width: 0;
  }

  tr {
    pointer-events: none;
  }

  :deep(.el-table tbody tr:hover > td) {
    // background-color: transparent !important;
    background: transparent;
  }

  // 双数行
  :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
    // background-color: #fff;
    background-color: transparent;
    color: #fff;
    height: 56px;
  }

  :deep(.el-table--striped .el-table__body tr.el-table__row--striped:hover td.el-table__cell) {
    // background: rgba(80, 123, 163, 0.3) !important;
    background-color: transparent;

    color: #fff;
  }

  // 表格内容 颜色设置
  :deep(.el-table__row) {
    font-size: 16px;
    font-family: Microsoft YaHei;

    color: #ffffff;
  }

  // 滚动条的宽度
  :deep(.el-table__body-wrapper::-webkit-scrollbar, ) {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
    right: -10px;
  }

  // 滚动条的滑块
  :deep(.el-scrollbar__thumb) {
    background-color: #507ba3;
    opacity: 1;
    border-radius: 3px;
  }
}

::-webkit-scrollbar {
  box-sizing: border-box;
  width: 6px;
  background-color: transparent;
}

//滚动条上的箭头按钮
// ::-webkit-scrollbar-button {
//   background-color: slateblue;
// }

//滚动条上的滚动滑块
::-webkit-scrollbar-thumb {
  background-color: #507ba3;
  border-radius: 22px;
}

//滚动条轨道
::-webkit-scrollbar-track {
  background-color: transparent;
}

// 滚动条没有滑块的轨道部分
::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
</style>