perf: to-top按钮随滚动条出现/消失

nezha-fronted/src/components/page/config/dc.vue

@@ -113,16 +113,18 @@
             </el-table-column>
             <el-table-column width="28" :resizable="false">
               <template slot="header" slot-scope="scope">
-              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-                <i class="nz-icon nz-icon-gear"></i>
-              </span>
+                <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+                  <i class="nz-icon nz-icon-gear"></i>
+                </span>
+              </template>
+              <template v-slot="scope">
+                <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
               </template>
             </el-table-column>
           </el-table>
           <div class="pagination-bottom" v-show="!showSubList">
             <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
           </div>
-          <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
         </div>
         <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="cabinetDc" :isFullScreen="isFullScreen" :from="'dc'" :targetTab.sync="targetTab" :detail="dcDetail"
                      @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
@@ -157,6 +159,9 @@
         cabinetDc: {}, // 用在二级cabinet列表页里
         dcDetail: [], //dc的详情信息，包含标题
 
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+        tableHover: false, //控制滚动条和top按钮同时出现
+
         showElementSet: false, //控制自定义列的弹框
         tableId: 'dcTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
@@ -447,6 +452,12 @@
               this.showTopBtn = false;
             }
           });
+          el.addEventListener("mouseenter", () => {
+            this.tableHover = true;
+          });
+          el.addEventListener("mouseleave", () => {
+            this.tableHover = false;
+          });
           window.onresize = function() {
             el._ps_.update();
           };