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);}