perf: 滚动条调整,table右侧优化等

1.滚动条加宽、legend限制滚动条滑块最小长度
2.取消table右侧滚动条预留区域
3.调整其他因为布局改变而错乱的样式
This commit is contained in:
陈劲松
2020-03-19 20:44:14 +08:00
parent f07fa1f030
commit 006314cf12
14 changed files with 115 additions and 140 deletions

View File

@@ -22,15 +22,14 @@
</div>
<div class="content-right">
<div class="top-tools">
<div></div>
<div>
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" :title="$t('overall.createPrometheusServer')"
id="prom-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<div class="top-tool-search float-right">
<div class="top-tool-main-right">
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" :title="$t('overall.createPrometheusServer')"
id="prom-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</div>
</div>
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="promTable" class="nz-table" v-scrollBar:el-table>
@@ -563,9 +562,6 @@
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
search: function (searchObj) {
this.pageObj.pageNo = 1;
@@ -658,7 +654,6 @@
this.getIdcData();
this.getUserData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
//绑定滚动条事件控制top按钮
let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {