feat: 适配分辨率

src/views/system/menu/index.vue

@@ -1,5 +1,6 @@
 <template>
    <div class="app-container">
+      <div ref="topContainerRef">
          <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
             <el-form-item label="菜单名称" prop="menuName">
                <el-input
@@ -46,9 +47,12 @@
             </el-col>
             <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>
+      </div>
 
+      <div :style="containerHeight">
          <el-table
             v-if="refreshTable"
+            height="100%"
             v-loading="loading"
             :data="menuList"
             row-key="menuId"
@@ -82,6 +86,7 @@
                </template>
             </el-table-column>
          </el-table>
+      </div>
 
       <!-- 添加或修改菜单对话框 -->
       <el-dialog :title="title" v-model="open" width="680px" append-to-body>
@@ -292,6 +297,10 @@
 import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
 import SvgIcon from "@/components/SvgIcon";
 import IconSelect from "@/components/IconSelect";
+import { useContainerHeight } from "@/hooks/tableHeight";
+
+const topContainerRef = ref();
+const containerHeight = useContainerHeight(topContainerRef);
 
 const { proxy } = getCurrentInstance();
 const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");

src/views/system/role/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="app-container">
+    <div ref="topContainerRef">
       <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
         <el-form-item label="角色名称" prop="roleName">
             <el-input
@@ -90,9 +91,11 @@
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
       </el-row>
+    </div>
 
+    <div :style="containerHeight">
       <!-- 表格数据 -->
-      <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+      <el-table height="100%" v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="角色编号" prop="roleId" width="120" />
          <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
@@ -139,6 +142,8 @@
          @pagination="getList"
       />
 
+    </div>
+
       <!-- 添加或修改角色配置对话框 -->
       <el-dialog :title="title" v-model="open" width="500px" append-to-body>
          <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
@@ -244,6 +249,10 @@
 <script setup name="Role">
 import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role";
 import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu";
+import { useContainerHeight } from "@/hooks/tableHeight";
+
+const topContainerRef = ref();
+const containerHeight = useContainerHeight(topContainerRef);
 
 const router = useRouter();
 const { proxy } = getCurrentInstance();

src/views/system/user/index.vue

@@ -16,6 +16,7 @@
         <!--用户数据-->
         <pane size="84">
           <el-col>
+            <div ref="topContainerRef">
               <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="90px">
                 <el-form-item label="用户名称啊" prop="userName">
                   <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
@@ -55,8 +56,10 @@
                 </el-col>
                 <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
               </el-row>
+            </div>
 
-            <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+            <div :style="containerHeight">
+              <el-table height="100%" v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
                 <el-table-column type="selection" width="50" align="center" />
                 <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
                 <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
@@ -96,6 +99,7 @@
                 </el-table-column>
               </el-table>
               <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+            </div>
           </el-col>
         </pane>
       </splitpanes>
@@ -220,6 +224,11 @@ import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser,
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 
+import { useContainerHeight } from "@/hooks/tableHeight";
+
+const topContainerRef = ref();
+const containerHeight = useContainerHeight(topContainerRef);
+
 const router = useRouter();
 const appStore = useAppStore()
 const { proxy } = getCurrentInstance();