gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-633 perf: panel-table样式调整

Browse Source
This commit is contained in:
chenjinsong
2021-05-19 14:43:25 +08:00
parent 727378c2f7
commit 55ed744186
3 changed files with 49 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -262,7 +262,7 @@
color: $--button-gray-color;
}
}
>.table-operation-item {
&>.table-operation-item {
justify-content: center;
align-items: center;
width: 40px;
@@ -278,7 +278,7 @@
font-size: 12px;
}
}
>.table-operation-item:hover {
&>.table-operation-item:hover {
opacity: .8;
}
.table-operation-item.table-operation-item--more {
@@ -309,32 +309,34 @@
.el-table__body-wrapper .is-hidden, .el-table__header-wrapper .is-hidden {
visibility: hidden;
}
.el-table--border td {
border-right: none !important;
}
/* 最后一列用box-shadow模拟边框 */
.el-table:not(.no-operation).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
box-shadow: 1px 0 $--right-box-border-color;
}
.el-table:not(.no-operation).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
border-right: none !important;
box-shadow: 1px 0 $--right-box-border-color;
}
.el-table__fixed-body-wrapper {
td:not(.is-hidden) {
border-left: 1px solid $--right-box-border-color;
}
}
.el-table__fixed-header-wrapper {
th:not(.is-hidden) {
border-left: 1px solid $--right-box-border-color;
}
th:last-of-type {
.nz-table2 {
.el-table--border td {
border-right: none !important;
}
}
.el-table--border::after, .el-table--group::after {
width: 0;
/* 最后一列用box-shadow模拟边框 */
.el-table:not(.no-operation).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
box-shadow: 1px 0 $--right-box-border-color;
}
.el-table:not(.no-operation).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
border-right: none !important;
box-shadow: 1px 0 $--right-box-border-color;
}
.el-table__fixed-body-wrapper {
td:not(.is-hidden) {
border-left: 1px solid $--right-box-border-color;
}
}
.el-table__fixed-header-wrapper {
th:not(.is-hidden) {
border-left: 1px solid $--right-box-border-color;
}
th:last-of-type {
border-right: none !important;
}
}
.el-table--border::after, .el-table--group::after {
width: 0;
}
}
/* end--覆盖el-table边框、gutter等样式 */
.pagination-bottom {

4
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -51,7 +51,7 @@
</el-dropdown>
</div>
<div class="mt-10 table-container" v-cloak v-show="firstShow">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight"
<el-table :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight"
:data="seriesItem" border tooltip-effect="light" v-cloak
@sort-change="tableDataSort" >
<el-table-column :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" prop="time"
@@ -87,7 +87,7 @@
</div>
<!-- <span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
</div>
<el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border
<el-table :data="seriesItemScreen" border height="95%" style="margin-top: 10px;"
@sort-change="tableDataSortScreen" tooltip-effect="light">
<el-table-column :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" prop="time"
:sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>

20
nezha-fronted/src/components/charts/chart.scss
View File

@@ -243,12 +243,30 @@
.chart-table, .chart-alert-info {
width: 100%;
overflow-x: hidden;
.table-container {
padding: 0 6px;
box-sizing: border-box;
.nz-table {
.el-table {
margin-top: 6px;
box-sizing: border-box;
.el-table__body tr:hover>td, .el-table__body tr.hover-row.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
background-color: #f9f9f9 !important;
}
td {
padding: 9px 0;
border-bottom: 1px solid $--right-box-border-color;
}
th {
border-color: $--right-box-border-color;
}
thead {
color: #333;
}
}
}
}