Commit ae91667e authored by tyn's avatar tyn

容器自适应

parent 41e3e6bd
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<el-table v-if="tableDataTotal>0" class="fixed-table" :class="headerFixed ? 'headerFixed':''" v-loading="tableLoading" :data="tableData" <el-table v-if="tableDataTotal>0" class="fixed-table" :class="headerFixed ? 'headerFixed':''" v-loading="tableLoading" :data="tableData"
element-loading-text="Loading" ref="tableRef" border fit highlight-current-row :default-sort="defaultSort?defaultSort:{}" element-loading-text="Loading" ref="tableRef" border fit highlight-current-row :default-sort="defaultSort?defaultSort:{}"
@sort-change="sortChange" @selection-change="selectionChange" :cell-class-name="cellClassName" :cell-style="cellStyle" @sort-change="sortChange" @selection-change="selectionChange" :cell-class-name="cellClassName" :cell-style="cellStyle"
:row-class-name="rowClassName" :row-style="rowStyle" :height="height" :maxHeight="maxHeight" v-sticky-header="stickyHeader"> :row-class-name="rowClassName" :row-style="rowStyle" :height="height" :maxHeight="comMaxHeight" v-sticky-header="stickyHeader">
<el-table-column type="selection" :width="needSelection.width ? needSelection.width : '38px'" v-if="needSelection.flag" <el-table-column type="selection" :width="needSelection.width ? needSelection.width : '38px'" v-if="needSelection.flag"
:fixed="needSelection.fixed" :align="needSelection.align" :show-overflow-tooltip="needSelection.showOverflowTooltip"> :fixed="needSelection.fixed" :align="needSelection.align" :show-overflow-tooltip="needSelection.showOverflowTooltip">
</el-table-column> </el-table-column>
...@@ -80,7 +80,7 @@ export default { ...@@ -80,7 +80,7 @@ export default {
type: [String, Number] type: [String, Number]
}, },
maxHeight: { maxHeight: {
type: [String, Number] type: Boolean
}, },
isIndex: { isIndex: {
type: Boolean, type: Boolean,
...@@ -168,7 +168,8 @@ export default { ...@@ -168,7 +168,8 @@ export default {
data() { data() {
return { return {
current_page: this.queryParams.pageNum, current_page: this.queryParams.pageNum,
show_page: this.paging show_page: this.paging,
comMaxHeight: null
}; };
}, },
watch: { watch: {
...@@ -177,9 +178,24 @@ export default { ...@@ -177,9 +178,24 @@ export default {
} }
}, },
created() { created() {
this.maxHeight ? this.maxHeightInit() : null;
}, },
methods: { methods: {
// 自适应当前容器
async maxHeightInit() {
try {
await this.$nextTick();
/**
* @type {HTMLDivElement}
*/
const container = document.querySelector(".table-list-com-ins .table-item");
if (container) {
this.comMaxHeight = `${container.offsetHeight}px`;
}
} catch (error) {
}
},
handleCurrentChange(e) { handleCurrentChange(e) {
if (this.MaxPage < e) { if (this.MaxPage < e) {
this.show_page = false; this.show_page = false;
...@@ -262,10 +278,10 @@ export default { ...@@ -262,10 +278,10 @@ export default {
} }
.el-table { .el-table {
height: auto; // height: auto;
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-items: center; // align-items: center;
.el-table__header-wrapper { .el-table__header-wrapper {
min-height: 40px; min-height: 40px;
} }
......
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
<skeleton v-if="tableLoading"></skeleton> <skeleton v-if="tableLoading"></skeleton>
<!-- table 列表 --> <!-- table 列表 -->
<table-list-com ref="tableContainer" :tableData="tableDataList" :formColum="formColum" :tableDataTotal="total" :queryParams="queryParams" <table-list-com ref="tableContainer" :tableData="tableDataList" :formColum="formColum" :tableDataTotal="total" :queryParams="queryParams"
v-else-if="!tableLoading" :maxHeight="'100%'" @handle-current-change="handleCurrentChange"> v-else-if="!tableLoading" :maxHeight="true" @handle-current-change="handleCurrentChange">
<!-- 项目列表 --> <!-- 项目列表 -->
<template slot="projectName" slot-scope="{data,row}"> <template slot="projectName" slot-scope="{data,row}">
<div v-if="row.projectName" class="no-line-feed ">{{row.projectName}}</div> <div v-if="row.projectName" class="no-line-feed ">{{row.projectName}}</div>
......
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<skeleton v-if="tableLoading"></skeleton> <skeleton v-if="tableLoading"></skeleton>
<!-- table 列表 --> <!-- table 列表 -->
<table-list-com ref="tableContainer" :tableData="tableDataList" :formColum="formColum" :tableDataTotal="total" :queryParams="queryParams" <table-list-com ref="tableContainer" :tableData="tableDataList" :formColum="formColum" :tableDataTotal="total" :queryParams="queryParams"
v-else-if="!tableLoading" :maxHeight="'100%'" @handle-current-change="handleCurrentChange"> v-else-if="!tableLoading" :maxHeight="true" @handle-current-change="handleCurrentChange">
<!-- 咨询机构名称 --> <!-- 咨询机构名称 -->
<template slot="advisoryBodyName" slot-scope="{data,row}"> <template slot="advisoryBodyName" slot-scope="{data,row}">
<div v-if="row.advisoryBodyName" class="no-line-feed ">{{row.advisoryBodyName}}</div> <div v-if="row.advisoryBodyName" class="no-line-feed ">{{row.advisoryBodyName}}</div>
......
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
<skeleton v-if="tableLoading"></skeleton> <skeleton v-if="tableLoading"></skeleton>
<!-- table 列表 --> <!-- table 列表 -->
<table-list-com ref="tableContainer" :tableData="tableDataList" :formColum="formColum" :tableDataTotal="total" :queryParams="queryParams" <table-list-com ref="tableContainer" :tableData="tableDataList" :formColum="formColum" :tableDataTotal="total" :queryParams="queryParams"
v-else-if="!tableLoading" :maxHeight="'100%'" @handle-current-change="handleCurrentChange"> v-else-if="!tableLoading" :maxHeight="true" @handle-current-change="handleCurrentChange">
<!-- 项目列表 --> <!-- 项目列表 -->
<template slot="projectName" slot-scope="{data,row}"> <template slot="projectName" slot-scope="{data,row}">
<div v-if="row.projectName" class="no-line-feed" v-html="row.projectName">{{row.projectName}}</div> <div v-if="row.projectName" class="no-line-feed" v-html="row.projectName">{{row.projectName}}</div>
......
...@@ -175,6 +175,8 @@ export default { ...@@ -175,6 +175,8 @@ export default {
} }
::v-deep .table-item { ::v-deep .table-item {
position: relative; position: relative;
/* 留高度给骨架屏 */
min-height: 360px;
.table-empty-container { .table-empty-container {
position: absolute; position: absolute;
display: flex; display: flex;
...@@ -184,8 +186,6 @@ export default { ...@@ -184,8 +186,6 @@ export default {
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
} }
/* 留高度给骨架屏 */
min-height: 360px;
.el-table td.el-table__cell { .el-table td.el-table__cell {
border-bottom: 0; border-bottom: 0;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment