修复列表页高度自适应的问题

修复单据的查询出错问题
master
toesbieya 6 years ago
parent 667c32fe42
commit 6fbe51ee0a
  1. 2
      vue/src/mixin/docTableMixin.js
  2. 31
      vue/src/view/app/common/ListPage/autoAdaptHeightMixin.js
  3. 7
      vue/src/view/app/common/ListPage/index.vue

@ -102,7 +102,7 @@ export default {
if (this.config.loading) return
this.config.loading = true
//折叠所有行
this.tableData.forEach(row => this.$refs.table.toggleRowExpansion(row, false))
this.tableData.forEach(row => this.$children[0].$refs.table.toggleRowExpansion(row, false))
this.row = null
this.api.search
.request(this.mergeSearchForm())

@ -9,39 +9,38 @@ import {debounce} from "@/util"
export default {
data() {
return {
tableMaxHeight: undefined
tableMaxHeight: undefined,
desiredDistance: undefined
}
},
methods: {
//设置表格距离视窗底部的理想距离(分页高度 + el-card的1px边距 + el-card padding + 页面margin)
calcDesiredDistance() {
const pageViewMargin = parseFloat(cssVariables['pageViewMargin'])
const paginationHeight = this.$el.querySelector('.table-container > .el-pagination') ? 50 : 0
this.desiredDistance = paginationHeight + 1 + 20 + pageViewMargin
},
resize() {
const clientHeight = window.innerHeight
const pageViewMargin = parseFloat(cssVariables['pageViewMargin'])
//计算表格底部距离视窗底部的距离
const tableRect = this.$refs.table.$el.getBoundingClientRect()
const bottomDistanceBetweenWindowAndTable = clientHeight - tableRect.top - tableRect.height
const distance = clientHeight - tableRect.top - tableRect.height
//判断有无分页组件,分页组件总高度为70px(本身50px高度,margin-top 20px)
const paginationHeight = this.$el.querySelector('.table-container > .el-pagination') ? 70 : 0
//表格距离视窗底部的理想距离(分页高度 + el-card的1px边距 + el-card padding + 页面margin)
const bottomDistanceBetweenWindowAndTableShouldBe =
paginationHeight
+ 1
+ 20
+ pageViewMargin
if (this.desiredDistance === undefined) {
this.calcDesiredDistance()
}
const overHeight = bottomDistanceBetweenWindowAndTableShouldBe - bottomDistanceBetweenWindowAndTable
if (overHeight > 0) {
const overHeight = this.desiredDistance - distance
this.tableMaxHeight = tableRect.height - overHeight
}
},
createResizeObserver() {
if (this.resizeObserver) return
this.resizeObserver = new ResizeObserver(this.resize)
this.resizeObserver.observe(this.$refs.table.$el)
this.resizeObserver.observe(this.$el)
this.$once('hook:beforeDestroy', () => {
this.resizeObserver && this.resizeObserver.disconnect()

@ -43,14 +43,9 @@ export default {
)
},
renderTableAndPagination({loading, table, pagination}) {
//autoAdaptHeightMixin
if (!table.props || !table.props.maxHeight) {
table.props.maxHeight = this.tableMaxHeight
}
return (
<el-row v-loading={loading} class="table-container">
<abstract-table {...table}/>
<abstract-table max-height={this.tableMaxHeight} {...table}/>
<abstract-pagination {...pagination}/>
</el-row>
)

Loading…
Cancel
Save