<template>
|
<div class="table-container">
|
<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>
|
<el-table-column prop="address" label="成绩" align="center">
|
</el-table-column>
|
</el-table>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
tableHeight: 40,
|
tableData: [{
|
date: '2016-05-02',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-04',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1517 弄'
|
}, {
|
date: '2016-05-01',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1519 弄'
|
},
|
{
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
},
|
{
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
},
|
{
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
},
|
{
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
},
|
{
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
},
|
{
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
},
|
{
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
},
|
]
|
}
|
},
|
methods: {
|
computedHeight() {
|
this.$nextTick(() => {
|
setTimeout(() => {
|
const content = this.$refs.tabContent;
|
this.tableHeight = content.offsetHeight;
|
})
|
})
|
}
|
},
|
mounted() {
|
this.computedHeight();
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.table-container {
|
width: 100%;
|
flex: 1;
|
position: relative;
|
|
.table-content {
|
position: absolute;
|
width: 100%;
|
top: 0;
|
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>
|
