vue3 页面 自适应 高度 分页固定

<template>
    <div class="app_box">
        <div class="app_box_title" ref="refTile">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px">
                <el-form-item label="反馈内容:">
                    <el-input v-model="formInline.feedbackContent" placeholder="请输入" clearable style="width: 214px;" />
                </el-form-item>
                <el-form-item label="选择日期:">
                    <el-date-picker v-model="formInline.StartTime" type="daterange" range-separator="-"
                        value-format="YYYY-MM-DD" start-placeholder="开始时间" end-placeholder="结束时间" :size="size" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="app_box_main">
            <div class="main_table">
                <el-table :data="tableData" border style="width: 100%" v-loading="loading"
                    element-loading-background="rgba(122, 122, 122, 0.8)" :height="maxheight">
                    <el-table-column prop="feedbackUserName" label="反馈人" />
                    <el-table-column prop="feedbackTime" label="反馈时间" />
                    <el-table-column prop="feedbackContent" label="反馈内容" :show-overflow-tooltip="true" />
                </el-table>
            </div>
            <div class="main_pagination">
                <el-pagination v-model:current-page="formInline.pageNum" v-model:page-size="formInline.pageSize"
                    :page-sizes="[10, 50, 100]" :small="true" background
                    layout="total, sizes, prev, pager, next, jumper" :total="formInline.total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script setup>
import * as utils from '@utils'
const { proxy } = getCurrentInstance();
const maxheight = ref(utils.mainHeightResize().height);
// 同步页面大小
function handleResize() {
    maxheight.value = utils.mainHeightResize().height - proxy.$refs.refTile.offsetHeight - 160;
}
onMounted(() => {
    maxheight.value = maxheight.value - proxy.$refs.refTile.offsetHeight - 160;
    utils.listenToResize(handleResize);
})
onUnmounted(() => {
    utils.stopListeningToResize(handleResize);
})

</script>

<style lang="scss" scoped>
.app_box {
  position: relative;
  background-color: #fff;
  padding: 15px;
  height: 100%;
}
.app_box_title {
  padding: 10px 0px;
  border-bottom: 1px solid #ccc;
}
.app_box_main {
  .main_btn {
    margin-top: 10px;
  }

  .main_table {
    margin-top: 10px;
  }

  .main_pagination {
    display: flex;
    justify-content: end;
    position: absolute;
    width: 100%;
    background-color: #fff;
    left: 0;
    bottom: 0;
    padding: 15px;
  }
}
</style>



<!-- utils.js  -->

// 获取屏幕宽度 高度
export function mainHeightResize() {
  const width = window.innerWidth;
  const height = window.innerHeight;
  return {
    width,
    height,
  };
}

// 监听窗口大小变化
export function listenToResize(callback) {
  window.addEventListener("resize", callback);
}

// 停止监听窗口大小变化
export function stopListeningToResize(callback) {
  window.removeEventListener("resize", callback);
}