滚动条

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,25 +333,32 @@ function handleReset() {
       </div>
     </div>
 
-    <!-- 数据表格 -->
+    <!-- 数据表格 (可滚动区域) -->
-    <Grid>
+    <div class="flex-1 overflow-hidden bg-card rounded shadow">
-      <template #toolbar-tools>
+      <Grid>
-        <button @click="handleAdd" class="mr-2">➕ 新增</button>
+        <template #toolbar-tools>
-        <button @click="() => gridApi.reload()">🔄 刷新</button>
+          <button @click="handleAdd" class="mr-2">➕ 新增</button>
-      </template>
+          <button @click="() => gridApi.reload()">🔄 刷新</button>
-
+        </template>
-      <template #action="{ row }">
+
-        <div class="flex gap-2">
+        <template #action="{ row }">
-          <button @click="() => handleEdit(row)" class="text-blue-500 hover:text-blue-700">✏️ 编辑
+          <div class="flex gap-2">
-          </button>
+            <button @click="() => handleEdit(row)" class="text-blue-500 hover:text-blue-700">✏️ 编辑
-          <button @click="() => handleDelete(row)" class="text-red-500 hover:text-red-700">🗑️ 删除
+            </button>
-          </button>
+            <button @click="() => handleDelete(row)" class="text-red-500 hover:text-red-700">🗑️ 删除
-        </div>
+            </button>
-      </template>
+          </div>
-    </Grid>
+        </template>
+      </Grid>
+    </div>
 
     <Modal :title="modalTitle">
       <Form/>
     </Modal>
   </div>
 </template>
+<style scoped>
+:deep(.vxe-pager--wrapper) {
+  margin-bottom: 0.5rem;
+}
+</style>