xiangpei
2024-04-07 b2ef755893a694ea07b7ca2f46e4571bbc8e9cb9
src/views/screen/components/screen-examine/components/examine-table.vue
@@ -1,8 +1,8 @@
<template>
  <div class="table-container">
    <div class="table-content">
      <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight">
        <el-table-column prop="date" label="排名" align="center">
    <div class="table-content" ref="tabContent">
      <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">
        <el-table-column prop="date" label="排名" align="center" width="100">
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center">
        </el-table-column>
@@ -73,21 +73,15 @@
  methods: {
    computedHeight() {
      this.$nextTick(() => {
        setTimeout(() => {
          const content = this.$refs.tabContent;
          this.tableHeight = content.offsetHeight;
        })
      })
      const content = this.$refs.tabContent;
      console.log(content);
      // this.tableHeight = content.clientHeight;
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.computedHeight();
      },1000)
    })
    this.computedHeight();
  }
}
</script>
@@ -96,7 +90,6 @@
.table-container {
  width: 100%;
  flex: 1;
  border: 1px solid red;
  position: relative;
  .table-content {
@@ -106,4 +99,58 @@
    bottom: 0;
  }
}
.rank-table {
  background-color: transparent !important;
  color: #fff !important;
  //滚动条的背景色
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
}
::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: transparent !important;
}
::v-deep .el-table--group,
.el-table--border {
  border: 0;
}
::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-color: #56739e99 !important;
}
::v-deep .el-table--border .el-table__cell {
  border-color: #56739e99 !important;
}
::v-deep .el-table th.el-table__cell>.cell {
  color: #447ED6;
}
::v-deep .el-scrollbar__bar.is-vertical {
  display: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: #447ed648;
}
</style>