fix: 用户管理，字典管理上一下二布局影响table表格溢出不显示问题

continew-org · Sep 3, 2024 · 23ca50c · 23ca50c
1 parent 5cfb0d7
commit 23ca50c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 29 deletions.
diff --git a/src/components/GiTable/index.vue b/src/components/GiTable/index.vue
@@ -71,19 +71,12 @@
     <div class="gi-table__body" :class="`gi-table__body-pagination-${attrs['page-position']}`">
       <div class="gi-table__container">
         <a-table ref="tableRef" :stripe="stripe" :size="size" column-resizable :bordered="{ cell: isBordered }"
-          v-bind="{ ...attrs, columns: _columns }" :scrollbar="true" :pagination="false">
+          v-bind="{ ...attrs, columns: _columns }" :scrollbar="true" >
           <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
             <slot :key="key" :name="key" v-bind="scoped"></slot>
           </template>
         </a-table>
       </div>
-      <template v-if="attrs.pagination">
-        <slot name="pagination-left"></slot>
-        <slot name="custom-pagination" :pagination-props="attrs.pagination">
-          <a-pagination v-bind="attrs.pagination" />
-        </slot>
-        <slot name="pagination-right"></slot>
-      </template>
     </div>
   </div>
 </template>

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -201,6 +201,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  position: relative;
   .header {
     padding: 0 0 10px;
     .title {
@@ -215,7 +216,6 @@
     height: 20px;
     font-size: 12px;
     color: var(--color-text-3);
-    margin-top: 12px;
     box-sizing: border-box;
     display: flex;
     justify-content: center;

diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
@@ -1,27 +1,27 @@
 <template>
   <div class="table-page">
-    <a-row justify="space-between" align="center" class="header">
+    <a-row justify="space-between" align="center" class="header page_header">
       <a-space wrap>
         <slot name="custom-title">
           <div class="title">字典管理</div>
         </slot>
       </a-space>
     </a-row>
-    <a-row align="stretch" :gutter="14" class="h-full">
+    <a-row align="stretch" :gutter="14" class="h-full page_content">
       <a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px" class="h-full ov-hidden">
         <DictTree placeholder="请输入关键词" @node-click="handleSelectDict" />
       </a-col>
       <a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" class="h-full ov-hidden">
-        <GiTable
-          row-key="id"
-          :data="dataList"
-          :columns="columns"
-          :loading="loading"
-          :scroll="{ x: '100%', y: '100%', minWidth: 600 }"
-          :pagination="pagination"
-          :disabled-tools="['size']"
-          :disabled-column-keys="['label']"
-          @refresh="search"
+        <GiTable 
+        row-key="id"
+        :data="dataList" 
+        :columns="columns" 
+        :loading="loading"
+        :scroll="{ x: '100%', y: '100%', minWidth: 600 }" 
+        :pagination="pagination" 
+        :disabled-tools="['size']"
+        :disabled-column-keys="['label']" 
+        @refresh="search"
         >
           <template #custom-left>
             <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
@@ -44,10 +44,10 @@
           <template #action="{ record }">
             <a-space>
               <a-link v-permission="['system:dict:item:update']" @click="onUpdate(record)">修改</a-link>
-              <a-link
-                v-permission="['system:dict:item:delete']"
-                status="danger"
-                @click="onDelete(record)"
+              <a-link 
+              v-permission="['system:dict:item:delete']" 
+              status="danger" 
+              @click="onDelete(record)"
               >
                 删除
               </a-link>
@@ -149,4 +149,13 @@ const onUpdate = (record: DictItemResp) => {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.page_header {
+  flex: 0 0 auto;
+}
+
+.page_content {
+  flex: 1;
+  overflow: auto;
+}
+</style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="table-page">
-    <a-row justify="space-between" align="center" class="header">
+    <a-row justify="space-between" align="center" class="header page_header">
       <a-space wrap>
         <slot name="custom-title">
           <div class="title">用户管理</div>
         </slot>
       </a-space>
     </a-row>
-    <a-row align="stretch" :gutter="14" class="h-full">
+    <a-row align="stretch" :gutter="14" class="h-full page_content">
       <a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px" class="h-full ov-hidden">
         <DeptTree placeholder="请输入关键词" @node-click="handleSelectDept" />
       </a-col>
@@ -213,4 +213,13 @@ const onResetPwd = (record: UserResp) => {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.page_header {
+  flex: 0 0 auto;
+}
+
+.page_content {
+  flex: 1;
+  overflow: auto;
+}
+</style>