滚动条

templates/vue/index.vue.j2

@@ -172,6 +172,10 @@ const gridOptions = {
     enabled: true,
     pageSize: 10,
   },
+  showOverflow: true,
+  minHeight: '100%',
+  maxHeight: 'auto',
+  showHeaderOverflow: true,
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({gridOptions})
@@ -307,12 +311,16 @@ function handleReset() {
 
 </script>
 
+
 <template>
-  <div style="height: 100vh; padding: 16px; box-sizing: border-box;">
+  <div style="height: 100vh; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column;">
     <!-- 查询表单 -->
-    <div class="bg-card mb-4 p-4 rounded shadow">
+    <div class="bg-card mb-4 p-4 rounded shadow flex-shrink-0">
       <h3 class="text-lg font-semibold mb-3">查询条件</h3>
-      <QueryForm/>
+      <div v-if="enumData.loading" class="text-center py-4 text-gray-500">
+        正在加载查询条件...
+      </div>
+      <QueryForm v-else />
       <div class="mt-3 flex gap-2">
         <button @click="handleSearch"
                 class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
@@ -325,7 +333,8 @@ function handleReset() {
       </div>
     </div>
 
-    <!-- 数据表格 -->
+    <!-- 数据表格 (可滚动区域) -->
+    <div class="flex-1 overflow-hidden bg-card rounded shadow">
       <Grid>
         <template #toolbar-tools>
           <button @click="handleAdd" class="mr-2">➕ 新增</button>
@@ -341,9 +350,15 @@ function handleReset() {
           </div>
         </template>
       </Grid>
+    </div>
 
     <Modal :title="modalTitle">
       <Form/>
     </Modal>
   </div>
 </template>
+<style scoped>
+:deep(.vxe-pager--wrapper) {
+  margin-bottom: 0.5rem;
+}
+</style>