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

perf: dashboard的表格自定义滚动条等

Browse Source 
1.dashboard的表格增加自定义滚动条
2.修复asset侧滑里vendor点击会关闭侧滑的问题
This commit is contained in:
陈劲松
2020-03-02 17:34:44 +08:00
parent dfc199330f
commit 1b77d2061b
4 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -507,6 +507,7 @@ li{
}
.nz-table .el-table__body-wrapper {
background-color: $content-right-background-color;
overflow: hidden;
}
.chart-table .nz-table.el-table th:last-of-type {
background-color: white;
@@ -628,7 +629,7 @@ li{
width: 520px;
}
.right-box-add-asset, .right-box-add-chart {
width: 550px;
width: 520px;
}
.right-box-chart .el-input__inner, .right-box-chart input {
background-color: white;

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

@@ -25,7 +25,7 @@
</div>
<div class="mt-10" v-cloak v-show="firstShow">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :data="seriesItem" :height="350" border tooltip-effect="light" v-cloak>
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :data="seriesItem" :height="350" border tooltip-effect="light" v-cloak v-scrollBar:el-table>
<el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
<el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
@@ -42,7 +42,7 @@
<!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
</div>
</div>
<el-table style="margin-top: 30px;" class="nz-table" :data="seriesItemScreen" :height="350" border tooltip-effect="light">
<el-table style="margin-top: 30px;" class="nz-table" :data="seriesItemScreen" :height="350" border tooltip-effect="light" v-scrollBar:el-table>
<el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
<el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>

8
nezha-fronted/src/components/common/rightBox/assetBox.vue
View File

@@ -90,7 +90,7 @@
</div>
</el-option>
</el-select>
<div class="right-box-row-btn right-box-row-btn-small" v-if="!tabView">
<div class="right-box-row-btn " v-if="!tabView">
<el-popover
placement="left"
trigger="click"
@@ -172,7 +172,7 @@
class="right-box-row-with-btn"
>
</el-cascader>
<div class="right-box-row-btn right-box-row-btn-small" v-if="!tabView">
<div class="right-box-row-btn " v-if="!tabView">
<el-popover
placement="left"
trigger="click"
@@ -323,7 +323,7 @@
<!-- </div>-->
</el-option>
</el-select>
<!-- <div class="right-box-row-btn right-box-row-btn-small">-->
<!-- <div class="right-box-row-btn ">-->
<!-- <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>-->
<!-- </div>-->
</template>
@@ -368,7 +368,7 @@
</el-option>
</el-select>
<!-- <div class="right-box-row-btn right-box-row-btn-small">-->
<!-- <div class="right-box-row-btn ">-->
<!-- <cabinet-config-box placement="left" :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>-->
<!-- </div>-->
</template>

6
nezha-fronted/src/main.js
View File

@@ -75,12 +75,11 @@ const el_scrollBar = el => {
el._ps_.update();
} else {
//el上挂一份属性
el._ps_ = new PerfectScrollbar(el, {});
el._ps_ = new PerfectScrollbar(el, {minScrollbarLength: 20});
}
};
Vue.directive("scrollBar", {
inserted(el, binding, vnode) {
console.info(1)
const { arg } = binding;
if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper");
@@ -109,7 +108,6 @@ Vue.directive("scrollBar", {
el_scrollBar(el);
},
componentUpdated(el, binding, vnode, oldVnode) {
console.info(2)
const { arg } = binding;
if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper");
@@ -127,7 +125,7 @@ Vue.directive("scrollBar", {
},
});
const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown']; //clickoutside排除的class(白名单)
const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown']; //clickoutside排除的class(白名单)
const clickoutside = {
// 初始化指令
bind(el, binding, vnode) {