NEZ-944 fix: table高度修复

This commit is contained in:
chenjinsong
2021-08-29 21:35:04 +08:00
parent 295c9366c5
commit dc8d5c2561
14 changed files with 34 additions and 20 deletions

View File

@@ -1,6 +1,6 @@
/*列表table通用样式*/
.list-page {
height: calc(100%);
height: 100%;
width: 100%;
box-sizing: border-box;
background-color: #f6f6f6;

View File

@@ -317,7 +317,7 @@ export default {
background-color: white;
}
}
.sub-container {
.bottom-data-list .sub-container {
padding: 10px;
height: calc(100% - 64px);
background-color: #f6f6f6;
@@ -326,6 +326,7 @@ export default {
background-color: white;
}
&>.nz-table2 {
height: 100%;
padding-top: 20px !important;
}
}

View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="bottom-data-list">
<div class="top-tools top-tools--sub">
<div class="top-tool-left">
<div class="sub-list-title">{{bottomHeaderTitle}}<slot name="title"></slot></div>

View File

@@ -24,7 +24,7 @@
ref="dataTable"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:height="subTableHeight"
:now-time="nowTime"
:table-data="tableData"
:alertMessageTabNew="true"

View File

@@ -17,7 +17,7 @@
:api="url"
v-loading="tools.loading"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:height="subTableHeight"
:table-data="tableData"
:assetTab="true"
@del="del"

View File

@@ -17,7 +17,7 @@
:api="url"
v-loading="tools.loading"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:height="subTableHeight"
:table-data="tableData"
:assetTab="true"
@del="del"

View File

@@ -17,7 +17,7 @@
v-loading="tools.loading"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:height="subTableHeight"
:table-data="tableData"
@del="del"
@copy="copy"

View File

@@ -321,6 +321,7 @@
.project-box {
width: 100%;
height: calc(100% - 8px) !important;
position: relative;
border-radius: 2px;
overflow: visible;

View File

@@ -25,7 +25,7 @@
<div v-if="showLayout.indexOf('clickSearch') > -1" class="search-box">
<slot name="search"></slot>
</div>
<div v-show="bottomBox.mainResizeShow" class="nz-table2" :style="showLayout.indexOf('clickSearch') > -1 ? `height:${tableBoxHeight}` : ''">
<div v-show="bottomBox.mainResizeShow" :style="{ height: nzTableHeight }" class="nz-table2">
<slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
</div>
<div v-show="bottomBox.mainResizeShow" v-if="showLayout.indexOf('pagination') > -1" class="pagination-bottom">
@@ -91,7 +91,17 @@ export default {
searchMsg: {
type: Object
},
tableBoxHeight: {}
nzTableHeightOffset: Number
},
computed: {
nzTableHeight () {
if (this.nzTableHeightOffset) {
if (this.layout.indexOf('clickSearch') > -1) {
return `calc(100% - ${this.nzTableHeightOffset}px`
}
}
return ''
}
},
data () {
return {

View File

@@ -128,7 +128,6 @@ export default {
return {
stateOptions: alertMessageConstant.states,
state: '1',
mainTableHeight: 'calc(100%- 64px)',
url: 'alert/message',
// 导出相关
importBox: { show: false, title: this.$t('overall.exportExcel') },

View File

@@ -7,7 +7,7 @@
:from="fromRoute.asset"
:layout="dataListLayout"
:search-msg="searchMsg"
:table-box-height="assetTableHeight"
:nz-table-height-offset="assetNzTableHeightOffset"
@search="search"
@getTableData="getTableData"
>
@@ -54,7 +54,7 @@
v-loading="tools.loading"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="dataListLayout.indexOf('clickSearch') > -1? 'calc(100% - 40px)' : mainTableHeight"
:height="mainTableHeight"
:table-data="tableData"
@cli="cli"
@del="del"
@@ -131,7 +131,7 @@ export default {
},
silenceBoxShow: false,
dataListLayout: ['searchInput', 'elementSet', 'clickSearch', 'pagination'],
assetTableHeight: `calc(100% - ${48 + 201 + 40}px)`,
assetNzTableHeightOffset: 281, // 包含click-search时nz-table的高度
blankObject: {
id: '',
name: '',

View File

@@ -57,7 +57,7 @@ export default {
return {
url: 'sys/log',
tableId: 'operationLogTable', // 需要分页的table的id用于记录每页数量,
mainTableHeight: this.$tableHeight.profileNormal,
mainTableHeight: this.$tableHeight.profile,
username: sessionStorage.getItem('nz-username'),
layout: [],
searchMsg: { // 给搜索框子组件传递的信息

View File

@@ -7,7 +7,7 @@
:from="fromRoute.endpoint"
:layout="dataListLayout"
:search-msg="searchMsg"
:table-box-height="endpointTableHeight"
:nz-table-height-offset="endpointNzTableHeightOffset"
@search="search"
@getTableData="getTableData"
>
@@ -56,7 +56,7 @@
v-loading="tools.loading"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="dataListLayout.indexOf('clickSearch') > -1? 'calc(100% - 8px)' : mainTableHeight"
:height="mainTableHeight"
:table-data="tableData"
:tableId="tableId"
@del="del"
@@ -297,7 +297,7 @@ export default {
showMore: false,
width: 0,
index: -1
},
}
// type: {
// label: 'Type',
// key: 'type',
@@ -315,7 +315,8 @@ export default {
state: [],
type: []
},
searchCheckBox: {}
searchCheckBox: {},
endpointNzTableHeightOffset: 204
}
},
methods: {

View File

@@ -69,10 +69,12 @@ Vue.prototype.$chartResizeTool = chartResizeTool
Vue.prototype.$tableSet = tableSet
Vue.prototype.$tableHeight = { // 列表页表格的高度
normal: 'calc(100% - 48px)', // 常规高度,特例在下方定义
profileNormal: 'calc(100% - 78px)', // 常规高度,特例在下方定义
assetList: 'calc(100% - 57px)',
profile: 'calc(100% - 78px)',
openSubList: { // 打开二级列表后的高度
mainList: 'calc(100% - 60px)',
subList: 'calc(100% - 38px)',
subList: 'calc(100% - 25px)',
subListFromAsset: 'calc(100% - 45px)',
toTopBtnTop: 'calc(50% - 11px)'
},
toTopBtnTop: 'calc(100% - 73px)',