NEZ-301 fix:修复分页列表被遮挡的问题

nezha-fronted/src/components/charts/chart-alert-list.vue

@@ -133,7 +133,7 @@
               </template>
             </el-table-column>
           </el-table>
-          <Pagination :pageObj="pageObj" @pageNo='pageNo'  @pageSize='pageSize' ref="Pagination" :append-to-body="false"></Pagination>
+          <Pagination :pageObj="pageObj" @pageNo='pageNo'  @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
         </div>
         <!--全屏-->
         <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenDialogClose" >

nezha-fronted/src/components/charts/chart-table.vue

@@ -54,7 +54,7 @@
                 </template>
               </el-table-column>
           </el-table>
-          <Pagination :pageObj="pageObj" @pageNo='pageNo' :post-page-sizes="pageSizes" @pageSize='pageSize' ref="Pagination" :append-to-body="false"></Pagination>
+          <Pagination :pageObj="pageObj" @pageNo='pageNo' :post-page-sizes="pageSizes" @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
         </div>
         <!--全屏-->
         <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenModal = false" >

nezha-fronted/src/components/common/pagination.vue

@@ -12,7 +12,7 @@
       layout="total, prev, pager, next, slot"
       :total="this.pageObj.total"
     >
-      <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"  :popper-append-to-body="appendToBody" class="pagination-size-select" @change="size">
+      <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"  :popper-append-to-body="appendToBody" class="pagination-size-select" @change="size" :popper-class="popClass" @visible-change="popperVisible">
         <el-option v-for="(item,index) in pageSizes" :key="item.value" :label="item.label" :value="item.value"></el-option>
       </el-select>
 
@@ -28,7 +28,8 @@ export default {
     pageObj:{},
     tableId:{},
     postPageSizes:{},
-    appendToBody:{default:true}
+    appendToBody:{default:true},
+    popClass:{}
   },
   data() {
     return {
@@ -50,6 +51,26 @@ export default {
     };
   },
   methods: {
+    popperVisible:function(visible){
+      console.log('fixed')
+      if(visible==true){
+        this.$nextTick(()=>{
+          if(this.popClass&&this.popClass==='out-popper-fix'){
+            let popDoms=document.querySelectorAll('.out-popper-fix');
+            popDoms.forEach(item=>{
+              item.style.bottom=item.style.top;
+              item.style.top='unset';
+
+              let icon=item.querySelector('.popper__arrow');
+              icon.style.bottom=icon.style.top;
+              icon.style.top='unset';
+              icon.style.transform='rotate(180deg)'
+
+            })
+          }
+        })
+      }
+    },
     background() {
       this.backgroundColor();
     },
@@ -117,6 +138,12 @@ export default {
       handler(n,o){
         this.resetPageSizes();
       }
+    },
+    popClass:{
+      immediate:true,
+      handler(n,o){
+        console.log(n)
+      }
     }
   }
 };