chore：优化表格列表显示

.env.development

@@ -10,4 +10,4 @@ VITE_API_BASE_URL = 'http://localhost:8000'
 VITE_BASE = '/'
 
 # 是否开启开发者工具
-VITE_OPEN_DEVTOOLS = true
+VITE_OPEN_DEVTOOLS = false

src/components/GiTable/index.vue

@@ -25,15 +25,14 @@
             </a-button>
           </a-tooltip>
           <template #content>
-            <a-doption v-for="item in sizeList" :key="item.value" :value="item.value" :active="item.value === size">{{ item.label }}</a-doption>
+            <a-doption v-for="item in sizeList" :key="item.value" :value="item.value" :active="item.value === size">
+              {{
+                item.label }}
+            </a-doption>
           </template>
         </a-dropdown>
-        <a-popover
+        <a-popover v-if="showSettingColumnBtn" trigger="click" position="br"
-          v-if="showSettingColumnBtn"
+          :content-style="{ minWidth: '120px', padding: '6px 8px 10px' }">
-          trigger="click"
-          position="br"
-          :content-style="{ minWidth: '120px', padding: '6px 8px 10px' }"
-        >
           <a-tooltip content="列设置">
             <a-button class="gi_hover_btn-border">
               <template #icon>
@@ -69,18 +68,22 @@
         </a-tooltip>
       </a-space>
     </a-row>
-    <div class="gi-table__container">
+    <div class="gi-table__body" :class="`gi-table__body-pagination-${attrs['page-position']}`">
-      <a-table
+      <div class="gi-table__container">
-        ref="tableRef"
+        <a-table ref="tableRef" :stripe="stripe" :size="size" :bordered="{ cell: isBordered }"
-        :stripe="stripe"
+          v-bind="{ ...attrs, columns: _columns }" :scrollbar="false" :pagination="false">
-        :size="size"
+          <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
-        :bordered="{ cell: isBordered }"
+            <slot :key="key" :name="key" v-bind="scoped"></slot>
-        v-bind="{ ...attrs, columns: _columns }"
+          </template>
-      >
+        </a-table>
-        <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
+      </div>
-          <slot :key="key" :name="key" v-bind="scoped"></slot>
+      <template v-if="attrs.pagination">
-        </template>
+        <slot name="pagination-left"></slot>
-      </a-table>
+        <slot name="custom-pagination" :pagination-props="attrs.pagination">
+          <a-pagination v-bind="attrs.pagination" />
+        </slot>
+        <slot name="pagination-right"></slot>
+      </template>
     </div>
   </div>
 </template>
@@ -196,7 +199,9 @@ defineExpose({ tableRef })
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  height: 100%;
   background: var(--color-bg-1);
+
   &--fullscreen {
     padding: $padding;
     position: fixed;
@@ -206,12 +211,89 @@ defineExpose({ tableRef })
     bottom: 0;
     z-index: 1001;
   }
+
   &__container {
     max-height: 100%;
     overflow: hidden;
+    flex: 1;
   }
+
+  &__body {
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    //如果为空时，将表格铺满
+    :deep(.arco-table-element):has(tbody .arco-table-tr-empty) {
+      height: 100%;
+    }
+
+    // 分页默认位置
+    :deep(.arco-pagination) {
+      margin-top: 10px;
+      justify-content: end;
+    }
+
+    &-pagination-top {
+      flex-direction: column-reverse;
+
+      :deep(.arco-pagination) {
+        margin-bottom: 10px;
+        justify-content: center;
+      }
+    }
+
+    // 上
+    &-pagination-t {
+      &l {
+        flex-direction: column-reverse;
+
+        :deep(.arco-pagination) {
+          margin-bottom: 10px;
+          justify-content: start;
+        }
+      }
+
+      &r {
+        flex-direction: column-reverse;
+
+        :deep(.arco-pagination) {
+          margin-bottom: 10px;
+          justify-content: end;
+        }
+      }
+    }
+
+    //下
+    &-pagination-bottom {
+      :deep(.arco-pagination) {
+        margin-top: 10px;
+        justify-content: center;
+      }
+    }
+
+    &-pagination-b {
+      &l {
+        :deep(.arco-pagination) {
+          margin-top: 10px;
+          justify-content: start;
+        }
+      }
+
+      &r {
+        :deep(.arco-pagination) {
+          margin-top: 10px;
+          justify-content: end;
+        }
+      }
+    }
+  }
+
   &__header {
     padding: 0 0 10px;
+
     &-title {
       color: var(--color-text-1);
       font-size: 18px;
@@ -219,17 +301,21 @@ defineExpose({ tableRef })
       line-height: 1.5;
     }
   }
+
   &__toolbar {
     :deep(.arco-form-item-layout-inline) {
       margin-right: 8px;
+
       &:last-of-type {
         margin-right: 0;
       }
     }
+
     :deep(.arco-form-layout-inline .arco-form-item) {
       margin-bottom: 0;
     }
   }
+
   &__draggable {
     padding: 1px 0; // 解决 max-height 和 overflow:auto 始终显示垂直滚动条问题
     max-height: 250px;
@@ -244,21 +330,38 @@ defineExpose({ tableRef })
   align-items: center;
 
   cursor: pointer;
+
   &:hover {
     background-color: var(--color-fill-2);
   }
+
   &__move {
     padding-left: 2px;
     padding-right: 2px;
     cursor: move;
   }
+
   :deep(.arco-checkbox) {
     width: 100%;
     font-size: 12px;
+
     .arco-checkbox-icon {
       width: 14px;
       height: 14px;
     }
   }
 }
+
+// 控制table高度占满
+:deep(.arco-table-border:not(.arco-table-border-cell) .arco-table-container) {
+  height: 100%;
+}
+
+:deep(.arco-table .arco-table-element) {
+  border: 1px solid var(--color-border-table);
+}
+
+:deep(.arco-table-body) {
+  height: 100%;
+}
 </style>

src/styles/base.scss

@@ -41,7 +41,7 @@ body[arco-theme='dark'] {
 #app {
   width: 100vw;
   height: 100vh;
-  min-height: 800px;
+  // min-height: 800px;
   overflow: hidden;
 }
 

src/views/system/notice/index.vue

@@ -48,7 +48,6 @@
         </a-space>
       </template>
     </GiTable>
-
     <NoticeAddModal ref="NoticeAddModalRef" @save-success="search" />
     <NoticeDetailModal ref="NoticeDetailModalRef" />
   </div>

src/views/system/user/index.vue

@@ -7,46 +7,25 @@
         </slot>
       </a-space>
     </a-row>
-    <a-row :gutter="16">
+    <a-row :gutter="16" class="h-full">
       <a-col :xs="0" :md="4" :lg="4" :xl="4" :xxl="4">
         <a-input v-model="deptName" placeholder="请输入部门名称" allow-clear style="margin-bottom: 10px">
           <template #prefix><icon-search /></template>
         </a-input>
-        <a-tree
+        <a-tree ref="treeRef" :data="deptList" :selected-keys="selectedKeys" default-expand-all show-line block-node
-          ref="treeRef"
+          @select="handleSelectDept">
-          :data="deptList"
-          :selected-keys="selectedKeys"
-          default-expand-all
-          show-line
-          block-node
-          @select="handleSelectDept"
-        >
         </a-tree>
       </a-col>
-      <a-col :xs="24" :md="20" :lg="20" :xl="20" :xxl="20">
+      <a-col :xs="24" :md="20" :lg="20" :xl="20" :xxl="20" class="h-full">
-        <GiTable
+        <GiTable row-key="id" :data="dataList" :columns="columns" :loading="loading"
-          row-key="id"
+          :scroll="{ x: '100%', y: '100%', minWidth: 1500 }" :pagination="pagination" :disabled-tools="['size']"
-          :data="dataList"
+          :disabled-column-keys="['username']" @refresh="search">
-          :columns="columns"
-          :loading="loading"
-          :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
-          :pagination="pagination"
-          :disabled-tools="['size']"
-          :disabled-column-keys="['username']"
-          @refresh="search"
-        >
           <template #custom-left>
             <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
               <template #prefix><icon-search /></template>
             </a-input>
-            <a-select
+            <a-select v-model="queryForm.status" :options="DisEnableStatusList" placeholder="请选择状态" allow-clear
-              v-model="queryForm.status"
+              style="width: 150px" @change="search" />
-              :options="DisEnableStatusList"
-              placeholder="请选择状态"
-              allow-clear
-              style="width: 150px"
-              @change="search"
-            />
             <a-button @click="reset">重置</a-button>
           </template>
           <template #custom-right>
@@ -63,12 +42,8 @@
             </a-tooltip>
           </template>
           <template #username="{ record }">
-            <GiCellAvatar
+            <GiCellAvatar :avatar="getAvatar(record.avatar, record.gender)" :name="record.username" is-link
-              :avatar="getAvatar(record.avatar, record.gender)"
+              @click="onDetail(record)" />
-              :name="record.username"
-              is-link
-              @click="onDetail(record)"
-            />
           </template>
           <template #gender="{ record }">
             <GiCellGender :gender="record.gender" />
@@ -86,13 +61,8 @@
           <template #action="{ record }">
             <a-space>
               <a-link v-permission="['system:user:update']" @click="onUpdate(record)">修改</a-link>
-              <a-link
+              <a-link v-permission="['system:user:delete']" status="danger"
-                v-permission="['system:user:delete']"
+                :title="record.isSystem ? '系统内置数据不能删除' : '删除'" :disabled="record.disabled" @click="onDelete(record)">
-                status="danger"
-                :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
-                :disabled="record.disabled"
-                @click="onDelete(record)"
-              >
                 删除
               </a-link>
               <a-dropdown>