perf: 用户部门树超出高度后添加滚动条

xingyu
1 parent 372de7a4
Showing 2 changed files with 16 additions and 13 deletions
yudao-ui-admin-vue3/src/types/auto-components.d.ts
yudao-ui-admin-vue3/src/views/system/user/index.vue
@@ -51,6 +51,7 @@ declare module &#39;@vue/runtime-core&#39; {
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElScroll: typeof import('element-plus/es')['ElScroll']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
@@ -8,17 +8,19 @@
         </div>
       </template>
       <el-input v-model="filterText" placeholder="搜索部门" />
-      <el-tree
-        ref="treeRef"
-        node-key="id"
-        default-expand-all
-        :data="deptOptions"
-        :props="defaultProps"
-        :highlight-current="true"
-        :filter-node-method="filterNode"
-        :expand-on-click-node="false"
-        @node-click="handleDeptNodeClick"
-      />
+      <el-scrollbar height="650">
+        <el-tree
+          ref="treeRef"
+          node-key="id"
+          default-expand-all
+          :data="deptOptions"
+          :props="defaultProps"
+          :highlight-current="true"
+          :filter-node-method="filterNode"
+          :expand-on-click-node="false"
+          @node-click="handleDeptNodeClick"
+        />
+      </el-scrollbar>
     </el-card>
     <el-card class="w-4/5 user" style="margin-left: 10px" :gutter="12" shadow="hover">
       <template #header>
@@ -534,8 +536,8 @@ onMounted(async () =&gt; {
  
 <style scoped>
 .user {
-  height: 900px;
-  max-height: 960px;
+  height: 780px;
+  max-height: 800px;
 }
 .card-header {
   display: flex;