perf: 调整列表页表格的高度,调整panel顶部工具栏左侧位置

This commit is contained in:
陈劲松
2020-03-04 21:27:41 +08:00
parent 06bb5423d9
commit 66ec1dc0d1
12 changed files with 26 additions and 21 deletions

View File

@@ -144,6 +144,11 @@ li{
line-height: 16px;
position: relative;
}
.to-top.nz-btn {
position: fixed;
bottom: 26px;
right: 20px;
}
.nz-btn-metricbtn{
height: 32px;
}

View File

@@ -8,7 +8,7 @@
text-align: center
}
.list-width{
width:98%;
width: calc(100% - 14px);
overflow-x:hidden;/*避免鼠标第一次放到曲线时x轴出现滚动条后消失*/
}
</style>

View File

@@ -60,7 +60,7 @@ export default {
float: left;
}
.pagination {
padding-top: 16px;
padding-top: 14px;
text-align: center;
}

View File

@@ -34,7 +34,7 @@
:data="tableData"
border
tooltip-effect="light"
height="calc(100% - 138px)"
height="calc(100% - 125px)"
v-scrollBar:el-table
style="width: 100%;">
<el-table-column

View File

@@ -26,7 +26,7 @@
:data="tableData"
border
tooltip-effect="light"
height="calc(100% - 138px)"
height="calc(100% - 125px)"
v-scrollBar:el-table
style="width: 100%;">
<el-table-column

View File

@@ -50,7 +50,7 @@
<el-table
class="nz-table"
height="calc(100% - 138px)"
height="calc(100% - 125px)"
style="width: 100%;"
:data="tableData"
v-scrollBar:el-table
@@ -179,6 +179,7 @@
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<!--<button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light">TOP</button>-->
</div>
<!--<asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData" ref="assetAddUnit"
@@ -757,12 +758,13 @@
this.getIDCOptionData();
},
mounted() {
setTimeout(()=>{
this.$nextTick(() => {
//左侧dc列表初始选中状态
if (this.$store.state.assetData.selectedData.length > 0) {
this.checkList = [];
this.checkList = this.$store.state.assetData.selectedData;
}
}, 50);
});
let localStorageTitle=localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path);
this.tablelable = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
this.dropCol = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
@@ -786,6 +788,3 @@
border: 1px solid #1166bb;
}
</style>
<style lang="scss">
</style>

View File

@@ -34,7 +34,7 @@
class="nz-table"
:data="tableData"
border
height="calc(100% - 138px)"
height="calc(100% - 125px)"
v-scrollBar:el-table
style="width: 100%;">
<el-table-column

View File

@@ -161,7 +161,7 @@
:data="cabinetDatas"
border
v-scrollBar:el-table
height="calc(100% - 138px)"
height="calc(100% - 125px)"
style="width: 100%;">
<el-table-column
:resizable="false"

View File

@@ -30,7 +30,7 @@
</div>
</div>
</div>
<el-table :data="tableData" border height="calc(100% - 138px)" style="width: 100%;" class="nz-table" v-scrollBar:el-table>
<el-table :data="tableData" border height="calc(100% - 125px)" style="width: 100%;" class="nz-table" v-scrollBar:el-table>
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
:key="`col-${index}`" :label="item.label">
<template slot-scope="scope" :column="item">

View File

@@ -622,20 +622,21 @@
}
.panel-dropdown-title {
line-height:25px;
line-height:24px;
padding-left:5px;
margin-left:10px;
margin-top: 3px;
text-align:left;
border-radius:4px;
width:120px;
height:25px;
height:24px;
border:solid 1px #d8dce1;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.panel-list-title {
min-height:25px;
min-height:24px;
width:100px;
white-space: nowrap;
overflow-x: hidden;
@@ -675,7 +676,7 @@
.table-list {
margin-top: 6px;
overflow-y: auto;
height: calc(100% - 120px);
height: calc(100% - 92px);
}
.box-content {

View File

@@ -119,7 +119,7 @@
:data="endpointTableData"
border
class="nz-table"
height="calc(100% - 138px)"
height="calc(100% - 125px)"
v-scrollBar:el-table
style="width: 100%;">
<el-table-column
@@ -215,7 +215,7 @@
v-scrollBar:el-table
class="nz-table"
:header-cell-class-name="cellClass"
height="calc(100% - 110px)"
height="calc(100% - 92px)"
@selection-change="selectChange"
ref="metricInfoTab"
style="width: 100%;">

View File

@@ -86,7 +86,7 @@ Vue.directive("scrollBar", {
!el && console.warn("未发现className为el-table__body-wrapper的dom");
// 启用x轴后不让原生滚动条出来作乱
vnode.context.$nextTick(() => {
/*vnode.context.$nextTick(() => {
el.classList.add("ps");
el.addEventListener("ps-scroll-y", () =>
el.classList.add("ps")
@@ -94,7 +94,7 @@ Vue.directive("scrollBar", {
el.addEventListener("ps-scroll-x", () =>
el.classList.add("ps")
);
});
});*/
}
const rules = ["fixed", "absolute", "relative"];
if (!rules.includes(window.getComputedStyle(el, null).position)) {