proTable高度自适应

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fs-admin",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

src/App.vue

@@ -8,7 +8,7 @@ themeStore.initTheme()
 </script>
 
 <template>
-  <el-config-provider :locale="locale" size="large">
+  <el-config-provider :locale="locale">
     <router-view></router-view>
   </el-config-provider>
 </template>

src/components/core/GlobalTabs.vue

@@ -161,6 +161,11 @@ watch(contextMenuVisible, val => {
     document.body.removeEventListener('click', closeContextMenu)
   }
 })
+
+// 刷新页面
+const refresh = () => {
+  router.go(0)
+}
 </script>
 
 <template>
@@ -172,6 +177,7 @@ watch(contextMenuVisible, val => {
       @tab-change="changeTab"
       @tab-remove="removeTab"
       @contextmenu.prevent="openContextMenu($event)"
+      @dblclick.native="refresh"
     >
       <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.title" :name="item.fullPath" :tab="item">
       </el-tab-pane>

src/components/core/ProTable.vue

@@ -265,6 +265,14 @@ const formSlots = ref<FormSlot[]>([])
 buildFormSlots(props.formConfig.formItems, formSlots.value)
 // ============== 表单部分结束 ===============
 
+const toolbarRef = ref<any>(null)
+const paginationRef = ref<any>(null)
+const tableHeight = computed(() => {
+  const toolbarHeight = toolbarRef.value ? toolbarRef.value.offsetHeight : 0
+  const paginationHeight = paginationRef.value ? paginationRef.value.offsetHeight : 0
+  return `calc(100% - ${toolbarHeight + paginationHeight}px)`
+})
+
 defineExpose({
   handleCreate,
   handleDelete,
@@ -281,7 +289,12 @@ defineExpose({
 
 <template>
   <div class="flex flex-col" style="max-height: 100vh" :style="{ height: height || '100%' }">
-    <el-card class="mb-4" shadow="never" v-if="searchList.length || slots.query">
+    <el-card
+      class="mb-4 shrink-0"
+      shadow="never"
+      :body-style="{ 'padding-bottom': '0' }"
+      v-if="searchList.length || slots.query"
+    >
       <el-form :inline="true">
         <el-form-item :label="item.label" v-for="(item, index) in searchList" :key="index">
           <form-comp :item="item" v-model="query[item.name]">
@@ -298,30 +311,33 @@ defineExpose({
       </el-form>
     </el-card>
 
-    <el-card class="h-full flex-grow-1" :body-style="{ height: '100%' }" shadow="never">
+    <el-card class="h-full flex-grow" :body-style="{ height: '100%' }" shadow="never">
       <div class="flex flex-col h-full">
-        <slot name="header"></slot>
-        <vxe-toolbar ref="xToolbar" v-bind="toolbarConfig" v-if="showToolbar">
-          <template #buttons>
-            <el-button type="primary" icon="Plus" @click="handleCreate">新增</el-button>
-            <el-button
-              type="danger"
-              icon="Delete"
-              @click="handleBatchDelete"
-              :disabled="!multipleSelection.length"
-              v-if="selection"
-            >
-              删除
-            </el-button>
-            <slot name="toolbar" :selection="multipleSelection"></slot>
-          </template>
-        </vxe-toolbar>
-        <div class="h-full flex-grow">
+        <div ref="toolbarRef" class="shrink-0">
+          <slot name="header"></slot>
+          <vxe-toolbar ref="xToolbar" v-bind="toolbarConfig" v-if="showToolbar">
+            <template #buttons>
+              <el-button type="primary" icon="Plus" @click="handleCreate">新增</el-button>
+              <el-button
+                type="danger"
+                icon="Delete"
+                @click="handleBatchDelete"
+                :disabled="!multipleSelection.length"
+                v-if="selection"
+              >
+                删除
+              </el-button>
+              <slot name="toolbar" :selection="multipleSelection"></slot>
+            </template>
+          </vxe-toolbar>
+        </div>
+        <div :style="{ height: tableHeight }">
           <vxe-table
             ref="xTable"
             id="xProTable"
             size="medium"
-            height="100%"
+            auto-resize
+            height="auto"
             :data="tableData"
             :row-config="{ isHover: true }"
             v-loading="loading"
@@ -334,9 +350,7 @@ defineExpose({
             <vxe-column fixed="right" title="操作" :width="tableConfig.operateWidth" v-if="tableConfig.showOperate">
               <template #default="{ row }">
                 <slot name="operateBefore" :row="row"></slot>
-                <el-button type="success" size="small" @click="handleView(row)" v-if="tableConfig.showView">
-                  查看
-                </el-button>
+                <el-button size="small" @click="handleView(row)" v-if="tableConfig.showView"> 查看 </el-button>
                 <el-button type="primary" size="small" @click="handleUpdate(row)" v-if="tableConfig.showEdit">
                   编辑
                 </el-button>
@@ -348,7 +362,7 @@ defineExpose({
             </vxe-column>
           </vxe-table>
         </div>
-        <div class="flex justify-end shrink-0">
+        <div ref="paginationRef" class="flex justify-end shrink-0">
           <el-pagination
             background
             layout="prev, pager, next, jumper, total"
@@ -360,42 +374,41 @@ defineExpose({
         </div>
       </div>
     </el-card>
-
-    <template v-if="formMode === 'dialog'">
-      <dialog-form
-        v-model="formVisible"
-        v-if="formVisible"
-        :dialogConfig="dialogConfig"
-        :formConfig="formConfig"
-        :formData="formData"
-        :formSlots="formSlots"
-        :create="crud.create"
-        :update="crud.update"
-        @success="handleFormSuccess"
-      >
-        <template #[slot.alias]="slotProps" v-for="slot in formSlots" :key="slot.alias">
-          <slot :name="slot.alias" v-bind="slotProps"></slot>
-        </template>
-      </dialog-form>
-    </template>
-    <template v-else>
-      <drawer-form
-        v-model="formVisible"
-        v-if="formVisible"
-        :drawerConfig="drawerConfig"
-        :formConfig="formConfig"
-        :formData="formData"
-        :formSlots="formSlots"
-        :create="crud.create"
-        :update="crud.update"
-        @success="handleFormSuccess"
-      >
-        <template #[slot.alias]="slotProps" v-for="slot in formSlots" :key="slot.alias">
-          <slot :name="slot.alias" v-bind="slotProps"></slot>
-        </template>
-      </drawer-form>
-    </template>
   </div>
+  <template v-if="formMode === 'dialog'">
+    <dialog-form
+      v-model="formVisible"
+      v-if="formVisible"
+      :dialogConfig="dialogConfig"
+      :formConfig="formConfig"
+      :formData="formData"
+      :formSlots="formSlots"
+      :create="crud.create"
+      :update="crud.update"
+      @success="handleFormSuccess"
+    >
+      <template #[slot.alias]="slotProps" v-for="slot in formSlots" :key="slot.alias">
+        <slot :name="slot.alias" v-bind="slotProps"></slot>
+      </template>
+    </dialog-form>
+  </template>
+  <template v-else>
+    <drawer-form
+      v-model="formVisible"
+      v-if="formVisible"
+      :drawerConfig="drawerConfig"
+      :formConfig="formConfig"
+      :formData="formData"
+      :formSlots="formSlots"
+      :create="crud.create"
+      :update="crud.update"
+      @success="handleFormSuccess"
+    >
+      <template #[slot.alias]="slotProps" v-for="slot in formSlots" :key="slot.alias">
+        <slot :name="slot.alias" v-bind="slotProps"></slot>
+      </template>
+    </drawer-form>
+  </template>
 </template>
 
 <style scoped>

src/components/core/form/DialogForm.vue

@@ -80,9 +80,9 @@ const submit = async () => {
         </template>
       </pro-form>
 
-      <template #footer v-if="!formConfig.disabled">
+      <template #footer>
         <el-button icon="Close" @click="closeDialog">取消</el-button>
-        <el-button icon="Check" type="primary" @click="submit">保存</el-button>
+        <el-button icon="Check" type="primary" @click="submit" v-if="!formConfig.disabled">保存</el-button>
       </template>
     </el-dialog>
   </div>