perf: 🔥 优化滚动

src/hooks/useFullscreen.ts

@@ -1,6 +1,6 @@
 /**
  *  @description 方法用来切换元素 进入全屏
- *  @vueuse/core 提供了 useFullscreen 方法，因此项目中采用 useFullscreen，目的是为了减少代码量
+ *  @vueuse/core 提供了 useFullscreen 方法，因此项目中采用 useFullscreen，实现效果功能是一样得，目的是为了减少代码量
  *  它原理原理实现如下：
  */
 

src/views/system/user/components/userSide.vue

@@ -3,6 +3,7 @@
     <div class="title">部门列表</div>
     <el-input v-model="filterText" placeholder="输入关键字进行过滤" class="filter-search"/>
     <div class="filter-tree">
+      <el-scrollbar class="scrollbar">
         <el-tree
             ref="treeRef"
             :data="tableData"
@@ -10,6 +11,8 @@
             default-expand-all
             :filter-node-method="filterNode"
         />
+      </el-scrollbar>
+
     </div>
 
   </el-card>

src/views/system/user/index.scss

@@ -74,10 +74,7 @@
       height: 33px;
     }
     .el-tree{
-      position: absolute;
+
-      width: 100%;
-      height: 100%;
-      overflow: auto;
     }
   }
   .filter-search{
@@ -90,6 +87,13 @@
     font-size: 18px;
     font-weight: 700;
   }
+  .scrollbar{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+
+  }
   .filter-tree{
     flex: 1;
     overflow: hidden;