<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="name" label="地区" align="center" width="100">
|
</el-table-column>
|
<el-table-column label="人脸设备" align="center">
|
<el-table-column prop="data1" label="设备正常数" align="center">
|
</el-table-column>
|
<el-table-column prop="data1" label="设备异常数" align="center">
|
</el-table-column>
|
</el-table-column>
|
<el-table-column label="车辆设备" align="center">
|
<el-table-column prop="data1" label="设备正常数" align="center">
|
</el-table-column>
|
<el-table-column prop="data1" label="设备异常数" align="center">
|
</el-table-column>
|
</el-table-column>
|
<el-table-column label="视频设备" align="center">
|
<el-table-column prop="data1" label="设备正常数" align="center">
|
</el-table-column>
|
<el-table-column prop="data1" label="设备异常数" align="center">
|
</el-table-column>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
tableHeight: 40,
|
tableData: [
|
{
|
name: '富顺县',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
{
|
name: '荣县',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
{
|
name: '高新区',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
{
|
name: '自流井区',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
{
|
name: '贡井区',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
{
|
name: '大安区',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
{
|
name: '沿滩区',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
]
|
}
|
},
|
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;
|
height: 380px;
|
position: relative;
|
background: rgba(67, 102, 155, 0.3);
|
border: 1px solid rgba(47, 91, 157, 0.8);
|
|
.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>
|
