表格高度自適應

---

1、方法一

根據頁面元素計算各自占比

<template><div class="main"><div class="query-form" ref="Query"><QueryFormref="QueryForm"@query="query"></QueryForm></div><div class="table-box" ref="Temp"><TableModalref="TableModal":maxHeight="tempHeight-200":tableData="tableData"></TableModal><!-- 分頁 --><div class="pagination-box flex-h flex-he"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":page-sizes="pageSizes":current-page="pageNum":page-size="pageSize":total="total"layout="total, sizes, prev, pager, next, jumper"backgroundsmall></el-pagination></div></div></div>
</template><script>import QueryForm from './QueryForm.vue';import TableModal from './TableModal.vue';import FileSaver from "file-saver";export default {components: {QueryForm, TableModal,},data() {return {tableData: [],total: 0,pageNum: 1,pageSize: 10,pageSizes: [10, 20, 50, 100],multipleSelection: [],maxHeight: 220,windowHeight: 0,  // 頁面窗口高度tempHeight: 0,  // 元素高度QueryHeight: 0, // 查詢框高度}},mounted() {this.query()// 自動獲取元素高度var that = this;//剛進入頁面時，獲取窗口默認寬高度this.windowHeight = document.body.clientHeightthis.QueryHeight = this.$refs.Query.offsetHeight//進入頁面元素默認寬高// this.tempHeight = this.$refs.Temp.offsetHeight// this.maxHeight = this.tempHeight - 70this.tempHeight = this.windowHeight - this.QueryHeightwindow.onresize = () => {return (() => {//窗口縮放自動獲取頁面寬高window.fullHeight = document.documentElement.clientHeight;this.QueryHeight = this.$refs.Query.offsetHeightthat.windowHeight = window.fullHeight; //高//窗口縮放自動獲取元素寬高// this.tempHeight = this.$refs.Temp.offsetHeight //高// this.maxHeight = this.tempHeight - 70this.tempHeight = this.windowHeight - this.QueryHeight})()}},methods: {// 分頁handleSizeChange (val) {this.pageSize = valthis.query()},// 當前頁handleCurrentChange (val) {this.pageNum = valthis.query()},handleSelectionChange(val) {this.multipleSelection = val},query(){const form = this.$refs.QueryForm.getParams()const params = { ...form, pageNum: this.pageNum, pageSize: this.pageSize}// ....},  },}
</script><style lang="scss" scoped>
.main  {padding: 10px;background-color: #F2F3F5;
} // 分頁
.pagination-box {margin-top: 20px;float: right;
}
:deep .pagination-box .el-select--mini .el-input--mini .el-input__inner {height: 22px;line-height: 22px;
}:deep .pagination-box .el-select--mini .el-input--mini .el-input__icon {line-height: 22px;
}
</style>

2、方法二

直接計算表格高度

<template><div><el-card><QueryFormref="queryForm"@query="query"></QueryForm></el-card><TableColumn:tableData="tableData":tableHeight="tableHeight"></TableColumn></div></template><script>
import QueryForm from "./queryForm.vue"
import TableColumn from './tableColumn.vue'export default {components: {QueryForm,TableColumn,},data() {return {tableData: [],tableHeight: 0,}},created() {this.tableHeight = window.innerHeight - 340},mounted() {this.query()this.handleTableHeight()},methods: {handleTableHeight: function () {var _this = this;window.onresize = () => {_this.tableHeight = window.innerHeight - 346};},query() {const params = this.$refs.queryForm.getForm()// .......},}
}
</script><style lang="less" scoped >.el-card {margin: 0 0 10px 0;}
</style>