| | |
| | | <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> |
| | |
| | | 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> |
| | |
| | | .table-container { |
| | | width: 100%; |
| | | flex: 1; |
| | | border: 1px solid red; |
| | | position: relative; |
| | | |
| | | .table-content { |
| | |
| | | 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> |